Spaces:

aigorithm
/

faketext

Running

App Files Files Community

aigorithm commited on Mar 30, 2025

Commit

a0d0340

verified ·

1 Parent(s): bb0417a

Upload 4 files

Browse files

Files changed (4) hide show

package.json +10 -0
public/index.html +12 -0
src/App.js +127 -0
src/index.js +6 -0

package.json ADDED Viewed

	@@ -0,0 +1,10 @@

+{
+  "name": "chat-animator",
+  "version": "1.0.0",
+  "type": "module",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "html2canvas": "^1.4.1"
+  }
+}

public/index.html ADDED Viewed

	@@ -0,0 +1,12 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chat Animator</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.js"></script>
+  </body>
+</html>

src/App.js ADDED Viewed

	@@ -0,0 +1,127 @@

+import { useState } from "react";
+import html2canvas from "html2canvas";
+const voiceIdMap = {
+  Rachel: "21m00Tcm4TlvDq8ikWAM",
+  Adam: "pNInz6obpgDQGcFmaJgB",
+  Bella: "EXAVITQu4vr4xnSDxMaL"
+};
+const apiKey = "sk_4e67c39c0e9cbc87462cd2643e1f4d1d9959d7d81203adc2";
+export default function App() {
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState("");
+  const [style, setStyle] = useState("whatsapp");
+  const [voice, setVoice] = useState("Rachel");
+  const generateVoice = async (text) => {
+    const voiceId = voiceIdMap[voice];
+    const response = 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
+        }
+      })
+    });
+    const blob = await response.blob();
+    const audioUrl = URL.createObjectURL(blob);
+    const audio = new Audio(audioUrl);
+    audio.play();
+  };
+  const addMessage = (sender) => {
+    if (!input.trim()) return;
+    const newMsg = { sender, text: input.trim() };
+    setMessages([...messages, newMsg]);
+    setInput("");
+    generateVoice(newMsg.text);
+  };
+  const updateMessage = (index, newText) => {
+    const newMsgs = [...messages];
+    newMsgs[index].text = newText;
+    setMessages(newMsgs);
+  };
+  const exportChatAsImage = () => {
+    const chat = document.getElementById("chat-container");
+    html2canvas(chat).then((canvas) => {
+      const link = document.createElement("a");
+      link.download = "chat_export.png";
+      link.href = canvas.toDataURL();
+      link.click();
+    });
+  };
+  return (
+    <div style={{ padding: 20, fontFamily: "sans-serif", background: "#f0f2f5", minHeight: "100vh" }}>
+      <select value={style} onChange={(e) => setStyle(e.target.value)} style={{ margin: "0 auto", display: "block" }}>
+        <option value="whatsapp">WhatsApp</option>
+        <option value="imessage">iMessage</option>
+        <option value="instagram">Instagram</option>
+      </select>
+      <select value={voice} onChange={(e) => setVoice(e.target.value)} style={{ margin: "10px auto", display: "block" }}>
+        <option value="Rachel">Rachel</option>
+        <option value="Adam">Adam</option>
+        <option value="Bella">Bella</option>
+      </select>
+      <div id="chat-container" style={{
+        margin: "10px auto",
+        width: 360,
+        background: style === "whatsapp" ? "#e5ddd5" : style === "imessage" ? "#d1e7ff" : "#fff0f5",
+        padding: 16,
+        borderRadius: 16,
+        boxShadow: "0 0 10px rgba(0,0,0,0.1)",
+        height: 520,
+        overflowY: "auto"
+      }}>
+        {messages.map((msg, i) => (
+          <div key={i} style={{
+            display: "flex",
+            justifyContent: msg.sender === "user" ? "flex-end" : "flex-start",
+            marginBottom: 10
+          }}>
+            {msg.sender === "bot" && <img src="https://i.pravatar.cc/30?img=7" style={{ borderRadius: "50%", marginRight: 8 }} />}
+            <input
+              value={msg.text}
+              onChange={(e) => updateMessage(i, e.target.value)}
+              style={{
+                padding: "8px 12px",
+                borderRadius: 20,
+                backgroundColor: msg.sender === "user" ? "#dcf8c6" : "#fff",
+                maxWidth: "70%"
+              }}
+            />
+            {msg.sender === "user" && <img src="https://i.pravatar.cc/30?img=3" style={{ borderRadius: "50%", marginLeft: 8 }} />}
+          </div>
+        ))}
+      </div>
+      <div style={{ width: 360, margin: "10px auto", display: "flex", gap: 8 }}>
+        <input
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="Type message..."
+          style={{ flex: 1, padding: 8, borderRadius: 8, border: "1px solid #ccc" }}
+        />
+        <button onClick={() => addMessage("user")} style={{ padding: "8px 12px" }}>User</button>
+        <button onClick={() => addMessage("bot")} style={{ padding: "8px 12px" }}>Bot</button>
+      </div>
+      <button onClick={exportChatAsImage} style={{ display: "block", margin: "10px auto", padding: "8px 14px", background: "#25d366", color: "#fff", border: "none", borderRadius: 8 }}>
+        Export Chat as Image
+      </button>
+    </div>
+  );
+}

src/index.js ADDED Viewed

	@@ -0,0 +1,6 @@

+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.js";
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<App />);