Spaces:

aigorithm
/

faketextaigorithm

Running

App Files Files Community

aigorithm commited on Mar 30, 2025

Commit

fc11a91

verified ·

1 Parent(s): 3b2add9

Upload 2 files

Browse files

Files changed (2) hide show

index.html +57 -8
main.js +75 -28

index.html CHANGED Viewed

@@ -4,15 +4,64 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Chat Animator + Video Export</title>
   <style>
-    body { font-family: sans-serif; margin: 0; background: #f0f2f5; }
-    .app { padding: 20px; max-width: 420px; margin: auto; }
-    .character, .message { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
-    .character img, .message img { width: 30px; height: 30px; border-radius: 50%; }
-    .bubble { padding: 10px 14px; border-radius: 20px; max-width: 70%; background: #fff; }
-    input, select, button { padding: 6px; margin: 4px 0; width: 100%; }
-    .controls, .chat { margin-top: 16px; }
   </style>
 </head>
 <body>

 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Chat Animator Final</title>
   <style>
+    html, body {
+      margin: 0;
+      background: #000;
+      height: 100%;
+    }
+    .app {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      background: #f0f2f5;
+      width: 100%;
+      max-width: 360px;
+      height: 640px;
+      margin: auto;
+      padding: 10px;
+      font-family: sans-serif;
+      box-sizing: border-box;
+    }
+    .character, .message {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 10px;
+    }
+    .character img, .message img {
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+    }
+    .bubble {
+      padding: 10px 14px;
+      border-radius: 20px;
+      max-width: 70%;
+      background: #fff;
+      opacity: 0;
+      animation: fadeIn 1s forwards;
+    }
+    .controls, .chat {
+      width: 100%;
+      margin-top: 10px;
+    }
+    input, select, button {
+      padding: 6px;
+      margin: 4px 0;
+      width: 100%;
+    }
+    @keyframes fadeIn {
+      to {
+        opacity: 1;
+      }
+    }
+    .typing {
+      font-style: italic;
+      opacity: 0.6;
+      animation: fadeIn 0.8s forwards;
+    }
   </style>
 </head>
 <body>

main.js CHANGED Viewed

@@ -1,23 +1,29 @@
 import { createElement as h, useState, useRef } from "https://esm.sh/react";
 import { createRoot } from "https://esm.sh/react-dom/client";
-import html2canvas from "https://esm.sh/html2canvas";
 const App = () => {
   const [characters, setCharacters] = useState([
-    { id: 0, name: "User", avatar: "https://i.pravatar.cc/30?img=3" },
-    { id: 1, name: "Bot", avatar: "https://i.pravatar.cc/30?img=7" }
   ]);
   const [selectedChar, setSelectedChar] = useState(0);
   const [messages, setMessages] = useState([]);
   const [input, setInput] = useState("");
-  const [playing, setPlaying] = useState(false);
   const chatRef = useRef(null);
-  const streamRef = useRef(null);
   const addCharacter = () => {
     const id = characters.length;
-    setCharacters([...characters, { id, name: "New", avatar: "" }]);
   };
   const handleAvatar = (id, file) => {
@@ -29,39 +35,67 @@ const App = () => {
     setCharacters(characters.map(c => c.id === id ? { ...c, name } : c));
   };
   const addMessage = () => {
     if (!input.trim()) return;
     setMessages([...messages, { charId: selectedChar, text: input }]);
     setInput("");
   };
   const playbackAndRecord = async () => {
-    setPlaying(true);
-    const container = chatRef.current;
-    const allMsgs = [...messages];
-    const tempContainer = container.cloneNode(false);
-    container.parentNode.appendChild(tempContainer);
-    const stream = tempContainer.captureStream(30);
-    streamRef.current = stream;
     const recorder = new MediaRecorder(stream);
-    let chunks = [];
-    recorder.ondataavailable = (e) => chunks.push(e.data);
     recorder.onstop = () => {
       const blob = new Blob(chunks, { type: "video/webm" });
-      const link = document.createElement("a");
-      link.href = URL.createObjectURL(blob);
-      link.download = "chat.mp4";
-      link.click();
-      tempContainer.remove();
-      setPlaying(false);
     };
     recorder.start();
-    for (let i = 0; i < allMsgs.length; i++) {
-      const msg = allMsgs[i];
       const char = characters.find(c => c.id === msg.charId);
       const msgDiv = document.createElement("div");
       msgDiv.className = "message";
       const avatar = document.createElement("img");
@@ -71,8 +105,15 @@ const App = () => {
       text.textContent = msg.text;
       msgDiv.appendChild(avatar);
       msgDiv.appendChild(text);
-      tempContainer.appendChild(msgDiv);
-      await new Promise(r => setTimeout(r, 1500));
     }
     recorder.stop();
@@ -87,6 +128,12 @@ const App = () => {
           value: char.name,
           onChange: (e) => handleNameChange(char.id, e.target.value)
         }),
         h("input", {
           type: "file",
           accept: "image/*",
@@ -109,7 +156,7 @@ const App = () => {
       h("button", { onClick: addMessage }, "Send Message")
     ]),
-    h("div", { className: "chat", ref: chatRef }, messages.map((msg, i) => {
       const char = characters.find(c => c.id === msg.charId);
       return h("div", { className: "message", key: i }, [
         h("img", { src: char?.avatar }),
@@ -119,9 +166,9 @@ const App = () => {
     h("button", {
       onClick: playbackAndRecord,
-      disabled: playing,
       style: { marginTop: 20 }
-    }, playing ? "Recording..." : "🎬 Export Video")
   ]);
 };

 import { createElement as h, useState, useRef } from "https://esm.sh/react";
 import { createRoot } from "https://esm.sh/react-dom/client";
+const voices = {
+  Rachel: "21m00Tcm4TlvDq8ikWAM",
+  Adam: "pNInz6obpgDQGcFmaJgB",
+  Bella: "EXAVITQu4vr4xnSDxMaL"
+};
+const defaultVoice = "Rachel";
+const apiKey = "sk_4e67c39c0e9cbc87462cd2643e1f4d1d9959d7d81203adc2";
 const App = () => {
   const [characters, setCharacters] = useState([
+    { id: 0, name: "User", avatar: "https://i.pravatar.cc/30?img=3", voice: "Rachel" },
+    { id: 1, name: "Bot", avatar: "https://i.pravatar.cc/30?img=7", voice: "Adam" }
   ]);
   const [selectedChar, setSelectedChar] = useState(0);
   const [messages, setMessages] = useState([]);
   const [input, setInput] = useState("");
+  const [recording, setRecording] = useState(false);
   const chatRef = useRef(null);
   const addCharacter = () => {
     const id = characters.length;
+    setCharacters([...characters, { id, name: "New", avatar: "", voice: defaultVoice }]);
   };
   const handleAvatar = (id, file) => {
     setCharacters(characters.map(c => c.id === id ? { ...c, name } : c));
   };
+  const handleVoiceChange = (id, voice) => {
+    setCharacters(characters.map(c => c.id === id ? { ...c, voice } : c));
+  };
   const addMessage = () => {
     if (!input.trim()) return;
     setMessages([...messages, { charId: selectedChar, text: input }]);
     setInput("");
   };
+  const getVoiceBlob = async (text, voiceId) => {
+    const res = await fetch(`https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "xi-api-key": apiKey
+      },
+      body: JSON.stringify({
+        text,
+        model_id: "eleven_monolingual_v1",
+        voice_settings: { stability: 0.4, similarity_boost: 0.75 }
+      })
+    });
+    return await res.blob();
+  };
   const playbackAndRecord = async () => {
+    setRecording(true);
+    const chat = document.getElementById("chatArea");
+    const clone = chat.cloneNode(false);
+    chat.parentNode.appendChild(clone);
+    const stream = clone.captureStream(30);
     const recorder = new MediaRecorder(stream);
+    const chunks = [];
+    recorder.ondataavailable = e => chunks.push(e.data);
     recorder.onstop = () => {
       const blob = new Blob(chunks, { type: "video/webm" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "chat_voice_typing.mp4";
+      a.click();
+      clone.remove();
+      setRecording(false);
     };
     recorder.start();
+    for (const msg of messages) {
       const char = characters.find(c => c.id === msg.charId);
+      // Typing animation
+      const typingDiv = document.createElement("div");
+      typingDiv.className = "message typing";
+      typingDiv.textContent = `${char.name} is typing...`;
+      clone.appendChild(typingDiv);
+      await new Promise(r => setTimeout(r, 1200));
+      typingDiv.remove();
+      // Real message
       const msgDiv = document.createElement("div");
       msgDiv.className = "message";
       const avatar = document.createElement("img");
       text.textContent = msg.text;
       msgDiv.appendChild(avatar);
       msgDiv.appendChild(text);
+      clone.appendChild(msgDiv);
+      // Voice playback
+      const voiceBlob = await getVoiceBlob(msg.text, voices[char.voice]);
+      const audio = new Audio(URL.createObjectURL(voiceBlob));
+      await new Promise(res => {
+        audio.onended = res;
+        audio.play();
+      });
     }
     recorder.stop();
           value: char.name,
           onChange: (e) => handleNameChange(char.id, e.target.value)
         }),
+        h("select", {
+          value: char.voice,
+          onChange: (e) => handleVoiceChange(char.id, e.target.value)
+        }, Object.keys(voices).map(v =>
+          h("option", { value: v, key: v }, v)
+        )),
         h("input", {
           type: "file",
           accept: "image/*",
       h("button", { onClick: addMessage }, "Send Message")
     ]),
+    h("div", { id: "chatArea", className: "chat", ref: chatRef }, messages.map((msg, i) => {
       const char = characters.find(c => c.id === msg.charId);
       return h("div", { className: "message", key: i }, [
         h("img", { src: char?.avatar }),
     h("button", {
       onClick: playbackAndRecord,
+      disabled: recording,
       style: { marginTop: 20 }
+    }, recording ? "Recording..." : "📱 Export TikTok-Style MP4")
   ]);
 };