Spaces:

aigorithm
/

faketextaigorithm

Running

App Files Files Community

aigorithm commited on Mar 30, 2025

Commit

adef775

verified ·

1 Parent(s): c204e52

Upload 2 files

Browse files

Files changed (2) hide show

index.html +46 -87
main.js +153 -70

index.html CHANGED Viewed

@@ -4,117 +4,76 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Full Fake Chat Animator</title>
   <style>
-    body {
       margin: 0;
-      font-family: sans-serif;
       background: #000;
-      color: white;
       display: flex;
       flex-direction: column;
       align-items: center;
-      padding: 16px;
-    }
-    .phone-frame {
-      position: relative;
-      width: 360px;
-      height: 640px;
-      overflow: hidden;
-      border-radius: 24px;
-      box-shadow: 0 0 10px rgba(0,0,0,0.4);
-      z-index: 1;
-    }
-    #background-video {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      z-index: 1;
-    }
-    #chat {
-      position: absolute;
       width: 100%;
-      height: 100%;
       padding: 10px;
-      overflow-y: auto;
-      z-index: 2;
     }
-    .message {
       display: flex;
-      align-items: flex-end;
-      margin-bottom: 8px;
     }
-    .avatar {
-      width: 28px;
-      height: 28px;
       border-radius: 50%;
-      margin: 0 8px;
     }
     .bubble {
-      padding: 10px;
-      border-radius: 18px;
       max-width: 70%;
-      font-size: 14px;
       opacity: 0;
-      animation: fadeIn 0.5s forwards;
     }
-    .left { flex-direction: row; }
-    .right { flex-direction: row-reverse; }
-    .left .bubble { background: #eee; color: #000; }
-    .right .bubble { background: #007aff; color: #fff; }
-    .whatsapp .left .bubble { background: #e1ffc7; }
-    .imessage .right .bubble { background: #007aff; }
-    .instagram .bubble { background: #fff0f5; color: #000; }
-    .reddit .bubble { background: #f6f7f8; border-left: 4px solid #ff4500; padding-left: 12px; }
-    @keyframes fadeIn {
-      to { opacity: 1; transform: translateY(0); }
-      from { opacity: 0; transform: translateY(10px); }
-    }
-    .controls {
       width: 100%;
-      max-width: 400px;
-      margin-top: 20px;
     }
-    .controls input, .controls select, .controls button {
-      width: 100%;
       margin: 4px 0;
-      padding: 8px;
-      border-radius: 8px;
     }
   </style>
 </head>
 <body>
-  <h2>Fake Chat Animator Pro</h2>
-  <div class="controls">
-    <label>Background MP4 Video:</label>
-    <input type="file" accept="video/mp4" onchange="loadBackground(event)">
-    <label>Choose Style:</label>
-    <select id="styleSelect" onchange="switchStyle()">
-      <option value="whatsapp">WhatsApp</option>
-      <option value="imessage">iMessage</option>
-      <option value="instagram">Instagram</option>
-      <option value="reddit">Reddit</option>
-    </select>
-    <label>Chat Script (JSON):</label>
-    <textarea id="chatScript" style="height: 120px; width: 100%;">[
-  { "name": "Suren", "side": "left", "avatar": "https://i.pravatar.cc/30?img=1", "voice": "Rachel", "text": "Hey, are you there?" },
-  { "name": "You", "side": "right", "avatar": "https://i.pravatar.cc/30?img=3", "voice": "Adam", "text": "Yeah, just got here!" }
-]</textarea>
-    <button onclick="renderAndRecord()">🎬 Export Chat with Voice</button>
-  </div>
-  <div class="phone-frame">
-    <video id="background-video" autoplay loop muted></video>
-    <div id="chat" class="whatsapp"></div>
-  </div>
   <script type="module" src="main.js"></script>
 </body>
 </html>

 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Chat Animator Fixed Recorder</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;
+    }
+    #recordArea {
+      background: white;
+      padding: 10px;
+      border-radius: 12px;
+      width: 360px;
+      height: 640px;
+      overflow-y: auto;
     }
   </style>
 </head>
 <body>
+  <div id="root"></div>
   <script type="module" src="main.js"></script>
 </body>
 </html>

main.js CHANGED Viewed

@@ -1,82 +1,165 @@
-const chat = document.getElementById("chat");
-const bgVideo = document.getElementById("background-video");
-const voiceMap = {
   Rachel: "21m00Tcm4TlvDq8ikWAM",
   Adam: "pNInz6obpgDQGcFmaJgB",
   Bella: "EXAVITQu4vr4xnSDxMaL"
 };
 const apiKey = "sk_4e67c39c0e9cbc87462cd2643e1f4d1d9959d7d81203adc2";
-function switchStyle() {
-  chat.className = document.getElementById("styleSelect").value;
-}
-function loadBackground(e) {
-  const file = e.target.files[0];
-  if (file) {
     const url = URL.createObjectURL(file);
-    bgVideo.src = url;
-  }
-}
-async function getVoiceBlob(text, voice) {
-  const voiceId = voiceMap[voice] || voiceMap["Rachel"];
-  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.5, similarity_boost: 0.75 } })
-  });
-  return await res.blob();
-}
-async function renderAndRecord() {
-  const script = JSON.parse(document.getElementById("chatScript").value);
-  chat.innerHTML = "";
-  bgVideo.pause();
-  bgVideo.currentTime = 0;
-  const stream = document.querySelector(".phone-frame").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 a = document.createElement("a");
-    a.href = URL.createObjectURL(blob);
-    a.download = "fake_chat_with_voice.mp4";
-    a.click();
   };
-  recorder.start();
-  bgVideo.play();
-  for (const msg of script) {
-    const wrapper = document.createElement("div");
-    wrapper.className = "message " + msg.side;
-    const avatar = document.createElement("img");
-    avatar.src = msg.avatar;
-    avatar.className = "avatar";
-    const bubble = document.createElement("div");
-    bubble.className = "bubble";
-    bubble.textContent = msg.text;
-    wrapper.appendChild(avatar);
-    wrapper.appendChild(bubble);
-    chat.appendChild(wrapper);
-    chat.scrollTop = chat.scrollHeight;
-    const voiceBlob = await getVoiceBlob(msg.text, msg.voice);
-    const audio = new Audio(URL.createObjectURL(voiceBlob));
-    await new Promise(res => {
-      audio.onended = res;
-      audio.play();
     });
-  }
-  recorder.stop();
-}

+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 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 recordRef = useRef(null);
+  const addCharacter = () => {
+    const id = characters.length;
+    setCharacters([...characters, { id, name: "New", avatar: "", voice: "Rachel" }]);
+  };
+  const handleAvatar = (id, file) => {
     const url = URL.createObjectURL(file);
+    setCharacters(characters.map(c => c.id === id ? { ...c, avatar: url } : c));
+  };
+  const handleNameChange = (id, name) => {
+    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 container = recordRef.current;
+    container.innerHTML = "";
+    const stream = container.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_fixed.mp4";
+      a.click();
+      setRecording(false);
+    };
+    recorder.start();
+    for (const msg of messages) {
+      const char = characters.find(c => c.id === msg.charId);
+      const typing = document.createElement("div");
+      typing.className = "message typing";
+      typing.textContent = `${char.name} is typing...`;
+      container.appendChild(typing);
+      await new Promise(r => setTimeout(r, 1200));
+      container.removeChild(typing);
+      const msgDiv = document.createElement("div");
+      msgDiv.className = "message";
+      const avatar = document.createElement("img");
+      avatar.src = char.avatar;
+      const text = document.createElement("div");
+      text.className = "bubble";
+      text.textContent = msg.text;
+      msgDiv.appendChild(avatar);
+      msgDiv.appendChild(text);
+      container.appendChild(msgDiv);
+      const blob = await getVoiceBlob(msg.text, voices[char.voice]);
+      const audio = new Audio(URL.createObjectURL(blob));
+      await new Promise(res => {
+        audio.onended = res;
+        audio.play();
+      });
+    }
+    recorder.stop();
+  };
+  return h("div", { className: "app" }, [
+    h("h3", null, "Characters"),
+    ...characters.map(char =>
+      h("div", { className: "character", key: char.id }, [
+        h("img", { src: char.avatar || "https://via.placeholder.com/30" }),
+        h("input", {
+          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/*",
+          onChange: (e) => handleAvatar(char.id, e.target.files[0])
+        })
+      ])
+    ),
+    h("button", { onClick: addCharacter }, "+ Add Character"),
+    h("div", { className: "controls" }, [
+      h("select", {
+        value: selectedChar,
+        onChange: (e) => setSelectedChar(parseInt(e.target.value))
+      }, characters.map(c => h("option", { value: c.id, key: c.id }, c.name))),
+      h("input", {
+        value: input,
+        onChange: (e) => setInput(e.target.value),
+        placeholder: "Type message..."
+      }),
+      h("button", { onClick: addMessage }, "Send Message")
+    ]),
+    h("div", { id: "recordArea", ref: recordRef }),
+    h("button", {
+      onClick: playbackAndRecord,
+      disabled: recording,
+      style: { marginTop: 20 }
+    }, recording ? "Recording..." : "📽 Export MP4 with Voice")
+  ]);
+};
+createRoot(document.getElementById("root")).render(h(App));