AryaAi-Speak/index.html at main · Aaryam70/AryaAi-Speak · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AryaAi Speak Pro</title>
    <style>
        :root { --primary: #00f2fe; --secondary: #4facfe; --bg: #0f172a; }
        body { font-family: 'Poppins', sans-serif; background: radial-gradient(circle at top right, #1e293b, #0f172a); color: white; margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
        .app-container { width: 95%; max-width: 800px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(15px); border-radius: 30px; padding: 30px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 25px 50px rgba(0,0,0,0.5); text-align: center; }
        .ai-logo { width: 70px; height: 70px; background: linear-gradient(45deg, var(--primary), var(--secondary)); border-radius: 50%; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; font-size: 35px; box-shadow: 0 0 20px var(--primary); animation: pulse 2s infinite; }
        @keyframes pulse { 0% { transform: scale(1); } 70% { transform: scale(1.05); } 100% { transform: scale(1); } }
        .highlight { background: #ffeb3b; color: #000; border-radius: 4px; padding: 0 2px; transition: background 0.2s; }
        #textDisplay { width: 100%; height: 200px; background: rgba(0, 0, 0, 0.3); border-radius: 15px; padding: 15px; margin-bottom: 15px; overflow-y: auto; text-align: left; line-height: 1.6; font-size: 18px; border: 1px solid rgba(255, 255, 255, 0.1); white-space: pre-wrap; outline: none; }
        .controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-top: 15px; }
        button { padding: 12px; border: none; border-radius: 12px; background: rgba(255, 255, 255, 0.1); color: white; font-weight: 600; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 5px; }
        button:hover { background: var(--secondary); transform: translateY(-2px); }
        .btn-main { background: linear-gradient(to right, #00f2fe, #4facfe); color: #000; }
        .sliders { display: flex; flex-wrap: wrap; gap: 15px; margin: 15px 0; background: rgba(255,255,255,0.03); padding: 12px; border-radius: 15px; }
        .slider-group { flex: 1; min-width: 120px; }
        input[type="range"] { width: 100%; accent-color: var(--primary); }
        .visualizer { display: flex; justify-content: center; align-items: flex-end; gap: 3px; height: 25px; margin-bottom: 10px; opacity: 0; transition: 0.3s; }
        .visualizer.active { opacity: 1; }
        .bar { width: 4px; background: var(--primary); border-radius: 2px; animation: bounce 1s infinite alternate; }
        @keyframes bounce { from { height: 5px; } to { height: 20px; } }
        select { width: 100%; padding: 12px; border-radius: 12px; background: #1e293b; color: white; border: 1px solid var(--primary); margin-bottom: 10px; }
        #pdfLoader { color: var(--primary); font-size: 14px; margin-bottom: 10px; font-weight: bold; }
    </style>
</head>
<body>
<div class="app-container">
    <div class="ai-logo">🎙️</div>
    <h2>AryaAi Speak Pro</h2>
    <div id="pdfLoader" style="display:none;">⏳ फाइल पढ़ी जा रही है...</div>
    <div class="visualizer" id="visualizer">
        <div class="bar" style="animation-delay: 0.1s"></div>
        <div class="bar" style="animation-delay: 0.3s"></div>
        <div class="bar" style="animation-delay: 0.2s"></div>
        <div class="bar" style="animation-delay: 0.4s"></div>
    </div>
    <select id="voiceSelect">
        <option value="hi-Girl">Hindi - Sweet Voice</option>
        <option value="en-Girl">English - Young Girl</option>
        <option value="ru-Girl">Russian - Young Girl</option>
        <option value="mai-Girl">Maithili Base (Soft)</option>
    </select>
    <div id="textDisplay" contenteditable="true">यहाँ अपने नोट्स पेस्ट करें या PDF अपलोड करें...</div>
    <div class="sliders">
        <div class="slider-group">
            <label>Speed: <span id="speedLabel">1.0</span>x</label>
            <input type="range" id="speed" min="0.5" max="2" step="0.1" value="1">
        </div>
        <div class="slider-group">
            <label>Pitch: <span id="pitchLabel">1.2</span></label>
            <input type="range" id="pitch" min="0.5" max="2" step="0.1" value="1.2">
        </div>
    </div>
    <div class="controls" id="btnGroup">
        <button class="btn-main" onclick="speak()">▶ Play</button>
        <button onclick="pause()">⏸ Pause</button>
        <button onclick="stop()">⏹ Stop</button>
    </div>
</div>
<script>
    let synth = window.speechSynthesis;
    let utterance = new SpeechSynthesisUtterance();
    let originalText = "";

    // 3. Highlight Logic
    utterance.onboundary = (event) => {
        if (event.name === 'word') {
            const text = originalText;
            const word = event.charIndex;
            const length = event.charLength;
            const before = text.substring(0, word);
            const current = text.substring(word, word + length);
            const after = text.substring(word + length);
            document.getElementById('textDisplay').innerHTML =
                `${before}<span class="highlight">${current}</span>${after}`;
        }
    };

    function speak() {
        synth.cancel();
        originalText = document.getElementById('textDisplay').innerText;
        utterance.text = originalText;
        utterance.rate = document.getElementById('speed').value;
        utterance.pitch = document.getElementById('pitch').value;

        const voicePref = document.getElementById('voiceSelect').value;
        if(voicePref.includes("hi")) utterance.lang = 'hi-IN';
        else if(voicePref.includes("en")) utterance.lang = 'en-US';
        else if(voicePref.includes("ru")) utterance.lang = 'ru-RU';
        else utterance.lang = 'hi-IN';

        document.getElementById('visualizer').classList.add('active');
        synth.speak(utterance);
    }

    function pause() {
        if(synth.paused) synth.resume();
        else synth.pause();
    }

    function stop() {
        synth.cancel();
        document.getElementById('visualizer').classList.remove('active');
        document.getElementById('textDisplay').innerHTML = originalText || document.getElementById('textDisplay').innerText;
    }

    document.getElementById('speed').oninput = function() { document.getElementById('speedLabel').innerText = this.value; };
    document.getElementById('pitch').oninput = function() { document.getElementById('pitchLabel').innerText = this.value; };
    utterance.onend = () => document.getElementById('visualizer').classList.remove('active');
        // 4. Large PDF Support Logic
    const pdfScript = document.createElement('script');
    pdfScript.src = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js";
    document.head.appendChild(pdfScript);

    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.accept = '.pdf';
    fileInput.style.display = 'none';
    document.body.appendChild(fileInput);

    const uploadBtn = document.createElement('button');
    uploadBtn.innerHTML = "📂 Upload PDF";
    uploadBtn.style.background = "linear-gradient(45deg, #ff416c, #ff4b2b)";
    uploadBtn.onclick = () => fileInput.click();
    document.getElementById('btnGroup').appendChild(uploadBtn);

    fileInput.onchange = async (e) => {
        const file = e.target.files[0];
        const loader = document.getElementById('pdfLoader');
        if (file) {
            loader.style.display = "block";
            document.getElementById('textDisplay').innerText = "प्रतीक्षा करें...";
            const reader = new FileReader();
            reader.onload = async function() {
                try {
                    const typedarray = new Uint8Array(this.result);
                    const pdfjsLib = window['pdfjs-dist/build/pdf'];
                    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
                    const pdf = await pdfjsLib.getDocument({data: typedarray}).promise;
                    let fullText = "";
                    for (let i = 1; i <= Math.min(pdf.numPages, 500); i++) {
                        const page = await pdf.getPage(i);
                        const content = await page.getTextContent();
                        fullText += content.items.map(item => item.str).join(" ") + "\n\n";
                        if(i % 10 === 0) loader.innerText = `⏳ पढ़ा जा रहा है: ${i} / ${pdf.numPages} पेज...`;
                    }
                    document.getElementById('textDisplay').innerText = fullText;
                    originalText = fullText;
                    loader.style.display = "none";
                } catch (err) {
                    alert("Error reading PDF: " + err.message);
                    loader.style.display = "none";
                }
            };
            reader.readAsArrayBuffer(file);
        }
    };
</script>
</body>
</html>