Upload components/PocketTTS.js with huggingface_hub

components/PocketTTS.js

@@ -0,0 +1,108 @@
+import { useState, useRef } from 'react';
+import { Volume2, Play, Download } from 'lucide-react';
+
+export default function PocketTTS() {
+  const [text, setText] = useState('Hello, this is a test of PocketTTS integration.');
+  const [audioUrl, setAudioUrl] = useState('');
+  const [loading, setLoading] = useState(false);
+  const audioRef = useRef(null);
+
+  const handleSynthesize = async () => {
+    if (!text.trim()) return;
+    setLoading(true);
+    setAudioUrl('');
+
+    try {
+      const response = await fetch('/api/tts', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text }),
+      });
+
+      if (!response.ok) throw new Error('TTS Generation failed');
+
+      const blob = await response.blob();
+      const url = URL.createObjectURL(blob);
+      setAudioUrl(url);
+    } catch (err) {
+      console.error(err);
+      alert('Failed to generate audio');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const playAudio = () => {
+    if (audioRef.current) {
+      audioRef.current.play();
+    }
+  };
+
+  return (
+    <div className="bg-slate-800 rounded-xl p-6 shadow-xl border border-slate-700">
+      <div className="flex items-center gap-2 mb-4">
+        <Volume2 className="w-5 h-5 text-blue-500" />
+        <h2 className="text-lg font-semibold text-white">Pocket TTS</h2>
+      </div>
+
+      <div className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-slate-400 mb-1">
+            Text to Speech
+          </label>
+          <textarea
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            className="w-full bg-slate-900 border border-slate-600 rounded-lg p-3 text-white placeholder-slate-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all resize-none h-24"
+          />
+        </div>
+
+        <div className="flex gap-2">
+          <button
+            onClick={handleSynthesize}
+            disabled={loading}
+            className="flex-1 bg-blue-600 hover:bg-blue-500 text-white font-medium py-2 rounded-lg transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
+          >
+            {loading ? (
+              <>
+                <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                Synthesizing...
+              </>
+            ) : (
+              'Generate Audio'
+            )}
+          </button>
+          
+          {audioUrl && (
+            <button
+              onClick={playAudio}
+              className="bg-slate-700 hover:bg-slate-600 text-white p-2 rounded-lg transition-colors"
+              title="Play Audio"
+            >
+              <Play className="w-5 h-5 fill-current" />
+            </button>
+          )}
+        </div>
+
+        {audioUrl && (
+          <div className="bg-slate-900 p-3 rounded-lg border border-slate-700 flex items-center gap-3">
+            <audio 
+              ref={audioRef} 
+              src={audioUrl} 
+              controls 
+              className="w-full h-8"
+            />
+             <a 
+              href={audioUrl} 
+              download="speech.wav"
+              className="text-slate-400 hover:text-white transition-colors p-1"
+              title="Download Audio"
+            >
+              <Download className="w-4 h-4" />
+            </a>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}