Spaces:

aigorithm
/

faketextaigorithm

Running

App Files Files Community

aigorithm commited on Mar 30, 2025

Commit

3b2add9

verified ·

1 Parent(s): 7d41d24

Upload 2 files

Browse files

Files changed (2) hide show

index.html +7 -8
main.js +103 -59

index.html CHANGED Viewed

@@ -4,16 +4,15 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Chat Animator</title>
   <style>
     body { font-family: sans-serif; margin: 0; background: #f0f2f5; }
-    .app { padding: 20px; max-width: 400px; margin: auto; }
-    .bubble { border-radius: 20px; padding: 10px; margin: 8px 0; display: inline-block; max-width: 70%; }
-    .user { background: #dcf8c6; align-self: flex-end; }
-    .bot { background: #fff; align-self: flex-start; }
-    .message { display: flex; align-items: center; gap: 8px; }
-    .avatar { border-radius: 50%; width: 30px; height: 30px; }
-    select, input, button { margin: 6px 0; padding: 8px; }
   </style>
 </head>
 <body>

 <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>

main.js CHANGED Viewed

@@ -1,83 +1,127 @@
-import { createElement as h, useState } from "https://esm.sh/react";
 import { createRoot } from "https://esm.sh/react-dom/client";
 import html2canvas from "https://esm.sh/html2canvas";
 const App = () => {
   const [messages, setMessages] = useState([]);
   const [input, setInput] = useState("");
-  const [style, setStyle] = useState("whatsapp");
-  const [voice, setVoice] = useState("Rachel");
-  const voiceIdMap = {
-    Rachel: "21m00Tcm4TlvDq8ikWAM",
-    Adam: "pNInz6obpgDQGcFmaJgB",
-    Bella: "EXAVITQu4vr4xnSDxMaL"
   };
-  const apiKey = "sk_4e67c39c0e9cbc87462cd2643e1f4d1d9959d7d81203adc2";
-  const generateVoice = async (text) => {
-    const response = await fetch("https://api.elevenlabs.io/v1/text-to-speech/" + voiceIdMap[voice], {
-      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 }
-      })
-    });
-    const blob = await response.blob();
-    new Audio(URL.createObjectURL(blob)).play();
   };
-  const addMessage = (sender) => {
     if (!input.trim()) return;
-    const msg = { sender, text: input };
-    setMessages([...messages, msg]);
     setInput("");
-    generateVoice(input);
   };
-  const exportImage = () => {
-    html2canvas(document.getElementById("chat")).then((canvas) => {
       const link = document.createElement("a");
-      link.href = canvas.toDataURL();
-      link.download = "chat_export.png";
       link.click();
-    });
   };
   return h("div", { className: "app" }, [
-    h("select", { value: style, onChange: (e) => setStyle(e.target.value) }, [
-      h("option", { value: "whatsapp" }, "WhatsApp"),
-      h("option", { value: "imessage" }, "iMessage"),
-      h("option", { value: "instagram" }, "Instagram")
-    ]),
-    h("select", { value: voice, onChange: (e) => setVoice(e.target.value) }, [
-      h("option", { value: "Rachel" }, "Rachel"),
-      h("option", { value: "Adam" }, "Adam"),
-      h("option", { value: "Bella" }, "Bella")
-    ]),
-    h("div", { id: "chat", style: { display: "flex", flexDirection: "column", gap: "8px", marginTop: "10px" } },
-      messages.map((msg, i) =>
-        h("div", { key: i, className: "message", style: { justifyContent: msg.sender === "user" ? "flex-end" : "flex-start" } }, [
-          msg.sender === "bot" && h("img", { src: "https://i.pravatar.cc/30?img=7", className: "avatar" }),
-          h("div", { className: `bubble ${msg.sender}` }, msg.text),
-          msg.sender === "user" && h("img", { src: "https://i.pravatar.cc/30?img=3", className: "avatar" })
-        ])
-      )
     ),
-    h("input", {
-      value: input,
-      onChange: (e) => setInput(e.target.value),
-      placeholder: "Type message...",
-      style: { width: "100%", marginTop: "10px" }
-    }),
-    h("div", { style: { display: "flex", gap: "8px" } }, [
-      h("button", { onClick: () => addMessage("user") }, "User"),
-      h("button", { onClick: () => addMessage("bot") }, "Bot"),
-      h("button", { onClick: exportImage }, "Export Image")
-    ])
   ]);
 };

+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) => {
+    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 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");
+      avatar.src = char.avatar;
+      const text = document.createElement("div");
+      text.className = "bubble";
+      text.textContent = msg.text;
+      msgDiv.appendChild(avatar);
+      msgDiv.appendChild(text);
+      tempContainer.appendChild(msgDiv);
+      await new Promise(r => setTimeout(r, 1500));
+    }
+    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("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", { 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("div", { className: "bubble" }, msg.text)
+      ]);
+    })),
+    h("button", {
+      onClick: playbackAndRecord,
+      disabled: playing,
+      style: { marginTop: 20 }
+    }, playing ? "Recording..." : "🎬 Export Video")
   ]);
 };