Spaces:

aigorithm
/

faketextaigorithm

Running

App Files Files Community

aigorithm commited on Mar 30

Commit

36c293d

verified ·

1 Parent(s): 41ce408

Upload 2 files

Browse files

Files changed (2) hide show

index.html +73 -64
main.js +71 -162

index.html CHANGED Viewed

@@ -3,98 +3,107 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Chat Animator Enhanced</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: 720px;
-      margin: auto;
-      padding: 10px;
-      font-family: sans-serif;
-      box-sizing: border-box;
-      position: relative;
     }
-    video#bg {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      z-index: 0;
-    }
-    .chat {
-      position: relative;
-      z-index: 2;
-      flex: 1;
       overflow-y: auto;
-      width: 100%;
-      margin-top: 10px;
     }
-    .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%;
       font-size: 14px;
-      opacity: 0;
-      animation: fadeIn 1s forwards;
     }
-    .left .bubble { background: #eee; color: #000; }
-    .right .bubble { background: #007aff; color: #fff; }
-    .whatsapp .left .bubble { background: #dcf8c6; }
-    .imessage .right .bubble { background: #007aff; }
-    .reddit .bubble { background: #f6f7f8; border-left: 4px solid #ff4500; }
-    .instagram .bubble { background: #fff0f5; }
-    @keyframes fadeIn {
-      to { opacity: 1; }
     }
-    .controls {
-      position: relative;
-      z-index: 3;
       width: 100%;
     }
-    .controls input, .controls select, .controls button {
       padding: 6px;
       width: 100%;
-      margin-top: 6px;
     }
   </style>
 </head>
 <body>
-  <div class="app">
-    <video id="bg" autoplay muted loop></video>
-    <div class="controls">
-      <input type="file" accept="video/mp4" onchange="setBg(event)">
-      <select id="styleSelect" onchange="setStyle()">
-        <option value="whatsapp">WhatsApp</option>
-        <option value="imessage">iMessage</option>
-        <option value="reddit">Reddit</option>
-        <option value="instagram">Instagram</option>
-      </select>
-      <button id="recordBtn">🎬 Export MP4</button>
-    </div>
-    <div id="chat" class="chat whatsapp"></div>
   </div>
   <script type="module" src="main.js"></script>
 </body>
 </html>

 <html lang="en">
 <head>
   <meta charset="UTF-8" />
+  <title>AiCut Pro Style Chat Builder</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <style>
+    body {
       margin: 0;
       background: #000;
+      color: white;
+      font-family: sans-serif;
       display: flex;
       flex-direction: column;
       align-items: center;
     }
+    .phone {
+      width: 360px;
+      height: 640px;
+      background: #f0f2f5;
+      border-radius: 32px;
       overflow-y: auto;
+      box-shadow: 0 0 12px rgba(0,0,0,0.5);
+      margin: 20px 0;
+      padding: 10px;
     }
+    .message {
       display: flex;
       margin-bottom: 10px;
+      align-items: flex-end;
     }
+    .message.left { flex-direction: row; }
+    .message.right { flex-direction: row-reverse; }
     .bubble {
       padding: 10px 14px;
+      border-radius: 18px;
       max-width: 70%;
       font-size: 14px;
+      line-height: 1.4;
+      opacity: 1;
     }
+    .left .bubble { background: #e5e5ea; color: black; }
+    .right .bubble { background: #007aff; color: white; }
+    .avatar {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      margin: 0 6px;
     }
+    .timeline {
       width: 100%;
+      max-width: 420px;
+      background: #111;
+      padding: 10px;
+      border-radius: 8px;
+      box-shadow: 0 0 8px rgba(255,255,255,0.1);
+    }
+    .msg-row {
+      background: #1e1e1e;
+      margin: 6px 0;
+      padding: 8px;
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
     }
+    select, input[type="text"] {
+      width: 100%;
       padding: 6px;
+      border-radius: 4px;
+      border: none;
+      background: #222;
+      color: white;
+    }
+    button {
+      margin-top: 10px;
+      padding: 8px 14px;
+      background: #007aff;
+      border: none;
+      border-radius: 6px;
+      color: white;
+      cursor: pointer;
+    }
+    .toolbar {
+      display: flex;
+      justify-content: space-between;
       width: 100%;
+      max-width: 420px;
     }
   </style>
 </head>
 <body>
+  <h2>📱 Fake Chat Builder</h2>
+  <div class="toolbar">
+    <select id="styleSelect" onchange="updatePreview()">
+      <option value="imessage">iMessage</option>
+      <option value="whatsapp">WhatsApp</option>
+      <option value="instagram">Instagram</option>
+      <option value="reddit">Reddit</option>
+    </select>
+    <button onclick="addMessage()">+ Add Message</button>
   </div>
+  <div class="phone" id="chatPreview"></div>
+  <div class="timeline" id="timeline"></div>
+  <button onclick="exportJSON()">📤 Export JSON</button>
   <script type="module" src="main.js"></script>
 </body>
 </html>

main.js CHANGED Viewed

@@ -1,165 +1,74 @@
-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));

+let messages = [
+  { name: "Suren", side: "left", avatar: "https://i.pravatar.cc/30?img=1", voice: "Rachel", text: "Hello!" },
+  { name: "You", side: "right", avatar: "https://i.pravatar.cc/30?img=3", voice: "Adam", text: "Hey there!" }
+];
+const preview = document.getElementById("chatPreview");
+const timeline = document.getElementById("timeline");
+const styles = {
+  imessage: { left: "#e5e5ea", right: "#007aff" },
+  whatsapp: { left: "#dcf8c6", right: "#34b7f1" },
+  instagram: { left: "#fff0f5", right: "#ffb6c1" },
+  reddit: { left: "#f6f7f8", right: "#ccc" }
 };
+function updatePreview() {
+  const style = document.getElementById("styleSelect").value;
+  preview.innerHTML = "";
+  messages.forEach(msg => {
+    const wrap = document.createElement("div");
+    wrap.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.style.background = styles[style][msg.side];
+    bubble.textContent = msg.text;
+    wrap.appendChild(avatar);
+    wrap.appendChild(bubble);
+    preview.appendChild(wrap);
+  });
+}
+function renderTimeline() {
+  timeline.innerHTML = "";
+  messages.forEach((msg, i) => {
+    const row = document.createElement("div");
+    row.className = "msg-row";
+    row.innerHTML = `
+      <input type="text" value="${msg.name}" placeholder="Name" onchange="messages[${i}].name = this.value" />
+      <input type="text" value="${msg.avatar}" placeholder="Avatar URL" onchange="messages[${i}].avatar = this.value" />
+      <select onchange="messages[${i}].voice = this.value">
+        <option ${msg.voice==="Rachel"?"selected":""}>Rachel</option>
+        <option ${msg.voice==="Adam"?"selected":""}>Adam</option>
+        <option ${msg.voice==="Bella"?"selected":""}>Bella</option>
+      </select>
+      <select onchange="messages[${i}].side = this.value">
+        <option value="left" ${msg.side==="left"?"selected":""}>Left</option>
+        <option value="right" ${msg.side==="right"?"selected":""}>Right</option>
+      </select>
+      <input type="text" value="${msg.text}" placeholder="Message" onchange="messages[${i}].text = this.value" />
+    `;
+    timeline.appendChild(row);
+  });
+  updatePreview();
+}
+function addMessage() {
+  messages.push({ name: "New", side: "left", avatar: "https://i.pravatar.cc/30", voice: "Rachel", text: "..." });
+  renderTimeline();
+}
+function exportJSON() {
+  const output = JSON.stringify(messages, null, 2);
+  const blob = new Blob([output], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "chat_script.json";
+  a.click();
+}
+renderTimeline();