Spaces:

aigorithm
/

faketextaigorithm

Running

App Files Files Community

aigorithm commited on Mar 30

Commit

557b9b9

verified ·

1 Parent(s): 8a46dd4

Upload 2 files

Browse files

Files changed (2) hide show

index.html +84 -84
main.js +53 -78

index.html CHANGED Viewed

@@ -3,121 +3,121 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <title>Fake Chat Studio - AiCut Pro</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <style>
-    body {
       margin: 0;
       font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-      background: #f9f9f9;
-      color: #111;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
     }
-    h2 {
-      margin-top: 16px;
-    }
-    .chat-preview {
       width: 360px;
-      height: 600px;
-      background: #f0f2f5;
-      border-radius: 24px;
-      box-shadow: 0 0 10px rgba(0,0,0,0.1);
-      overflow-y: auto;
-      padding: 10px;
-      margin: 12px 0;
     }
     .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;
     }
-    .left .bubble {
       background: #e5e5ea;
-      color: black;
-    }
-    .right .bubble {
-      background: #007aff;
-      color: white;
     }
-    .avatar {
-      width: 28px;
-      height: 28px;
       border-radius: 50%;
-      margin: 0 6px;
     }
-    .editor {
-      width: 100%;
-      max-width: 420px;
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-      padding: 10px;
     }
-    .msg-editor {
-      background: #fff;
-      border: 1px solid #ddd;
-      border-radius: 12px;
-      padding: 12px;
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
     }
-    .msg-editor input, .msg-editor select {
-      padding: 8px;
-      font-size: 14px;
-      border-radius: 6px;
-      border: 1px solid #ccc;
     }
     button {
-      background: #007aff;
       border: none;
-      border-radius: 6px;
       color: white;
-      padding: 10px;
-      font-size: 14px;
       cursor: pointer;
     }
-    .controls {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 10px;
-      width: 100%;
-      max-width: 420px;
-      justify-content: space-between;
-      padding: 0 10px;
-    }
-    .controls input[type="text"] {
-      flex: 1;
-    }
   </style>
 </head>
 <body>
-  <h2>📱 Fake Chat Studio</h2>
-  <div class="controls">
-    <select id="styleSelect" onchange="renderPreview()">
-      <option value="imessage">iMessage</option>
-      <option value="whatsapp">WhatsApp</option>
-      <option value="instagram">Instagram</option>
-      <option value="reddit">Reddit</option>
-    </select>
-    <input type="text" id="prompt" placeholder="Generate chat: funny convo about aliens">
-    <button onclick="generateAI()">🤖 Generate</button>
-    <button onclick="addMessage()">+ Add</button>
-    <button onclick="renderAndExport()">🎬 Export Video</button>
   </div>
-  <div class="chat-preview" id="chatPreview"></div>
-  <div class="editor" id="editor"></div>
   <script type="module" src="main.js"></script>
 </body>
 </html>

 <html lang="en">
 <head>
   <meta charset="UTF-8" />
+  <title>Chat Animator TikTok Export</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <style>
+    html, body {
       margin: 0;
+      padding: 0;
+      background: #000;
+      height: 100%;
       font-family: -apple-system, BlinkMacSystemFont, sans-serif;
     }
+    .phone-frame {
       width: 360px;
+      height: 640px;
+      margin: 0 auto;
+      position: relative;
+      overflow: hidden;
+      border-radius: 32px;
+      box-shadow: 0 0 12px rgba(0,0,0,0.6);
+    }
+    video#bg {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      z-index: 0;
+    }
+    #chat {
+      position: absolute;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      padding: 12px;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      overflow-y: hidden;
     }
     .message {
       display: flex;
       align-items: flex-end;
+      margin-bottom: 10px;
+      opacity: 0;
+      transform: translateY(20px);
+      animation: fadeIn 0.6s ease forwards;
+    }
+    .left { flex-direction: row; }
+    .right { flex-direction: row-reverse; }
+    .avatar {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      margin: 0 6px;
     }
     .bubble {
       max-width: 70%;
+      padding: 10px 14px;
       font-size: 14px;
+      border-radius: 18px;
+      background: white;
     }
+    .right .bubble { background: #007aff; color: white; }
+    .typing {
+      width: 48px;
+      height: 20px;
       background: #e5e5ea;
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 3px;
+      margin-bottom: 10px;
+      animation: fadeIn 0.3s ease;
     }
+    .typing span {
+      width: 6px;
+      height: 6px;
+      background: #999;
       border-radius: 50%;
+      animation: blink 1.4s infinite;
     }
+    .typing span:nth-child(2) { animation-delay: 0.2s; }
+    .typing span:nth-child(3) { animation-delay: 0.4s; }
+    @keyframes fadeIn {
+      to { opacity: 1; transform: translateY(0); }
     }
+    @keyframes blink {
+      0%, 80%, 100% { opacity: 0.2; }
+      40% { opacity: 1; }
     }
+    #controls {
+      text-align: center;
+      margin: 10px auto;
+      color: white;
     }
     button {
+      padding: 10px 20px;
+      background: #25d366;
       border: none;
+      border-radius: 8px;
       color: white;
+      font-size: 16px;
       cursor: pointer;
     }
   </style>
 </head>
 <body>
+  <div class="phone-frame">
+    <video id="bg" muted loop></video>
+    <div id="chat"></div>
+  </div>
+  <div id="controls">
+    <input type="file" accept="video/mp4" onchange="loadBackground(event)">
+    <button onclick="start()">🎬 Export MP4 with Voice</button>
   </div>
   <script type="module" src="main.js"></script>
 </body>
 </html>

main.js CHANGED Viewed

@@ -1,112 +1,87 @@
-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 editor = document.getElementById("editor");
-const styles = {
-  imessage: { left: "#e5e5ea", right: "#007aff" },
-  whatsapp: { left: "#dcf8c6", right: "#34b7f1" },
-  instagram: { left: "#fff0f5", right: "#ffb6c1" },
-  reddit: { left: "#f6f7f8", right: "#ccc" }
 };
 const apiKey = "sk_4e67c39c0e9cbc87462cd2643e1f4d1d9959d7d81203adc2";
-const voiceIdMap = { Rachel: "21m00Tcm4TlvDq8ikWAM", Adam: "pNInz6obpgDQGcFmaJgB", Bella: "EXAVITQu4vr4xnSDxMaL" };
-function renderPreview() {
-  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 renderEditor() {
-  editor.innerHTML = "";
-  messages.forEach((msg, i) => {
-    const row = document.createElement("div");
-    row.className = "msg-editor";
-    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">
-    `;
-    editor.appendChild(row);
-  });
-  renderPreview();
-}
-function addMessage() {
-  messages.push({ name: "New", side: "left", avatar: "https://i.pravatar.cc/30", voice: "Rachel", text: "..." });
-  renderEditor();
 }
 async function getVoiceBlob(text, voice) {
-  const voiceId = voiceIdMap[voice] || voiceIdMap.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 renderAndExport() {
-  renderPreview();
-  const stream = preview.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 = "chat_ai_video.mp4";
     a.click();
   };
   recorder.start();
   for (const msg of messages) {
-    const voice = await getVoiceBlob(msg.text, msg.voice);
-    const audio = new Audio(URL.createObjectURL(voice));
-    await new Promise(res => {
-      audio.onended = res;
       audio.play();
     });
   }
-  recorder.stop();
-}
-async function generateAI() {
-  const prompt = document.getElementById("prompt").value || "funny conversation between Suren and Elon Musk";
-  const mock = [
-    { name: "Suren", side: "left", avatar: "https://i.pravatar.cc/30?img=4", voice: "Rachel", text: "Did you launch that rocket again?" },
-    { name: "Elon", side: "right", avatar: "https://i.pravatar.cc/30?img=8", voice: "Adam", text: "Yes... but it came back with fries." }
-  ];
-  messages = mock;
-  renderEditor();
 }

+const chat = document.getElementById("chat");
+const bg = document.getElementById("bg");
+const messages = [
+  { name: "Suren", side: "left", avatar: "https://i.pravatar.cc/30?img=5", voice: "Rachel", text: "Are you ready to launch?" },
+  { name: "Elon", side: "right", avatar: "https://i.pravatar.cc/30?img=9", voice: "Adam", text: "Always ready. 3...2...1..." },
+  { name: "Suren", side: "left", avatar: "https://i.pravatar.cc/30?img=5", voice: "Rachel", text: "We’re live on TikTok now!" }
 ];
+const voiceMap = {
+  Rachel: "21m00Tcm4TlvDq8ikWAM",
+  Adam: "pNInz6obpgDQGcFmaJgB",
+  Bella: "EXAVITQu4vr4xnSDxMaL"
 };
 const apiKey = "sk_4e67c39c0e9cbc87462cd2643e1f4d1d9959d7d81203adc2";
+function loadBackground(e) {
+  const file = e.target.files[0];
+  const url = URL.createObjectURL(file);
+  bg.src = url;
+  bg.play();
 }
 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.4, similarity_boost: 0.75 } })
   });
   return await res.blob();
 }
+async function start() {
+  chat.innerHTML = "";
+  bg.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 = "chat_tiktok_ready.mp4";
     a.click();
   };
   recorder.start();
+  bg.play();
   for (const msg of messages) {
+    const typing = document.createElement("div");
+    typing.className = "typing";
+    typing.innerHTML = "<span></span><span></span><span></span>";
+    chat.appendChild(typing);
+    chat.scrollTop = chat.scrollHeight;
+    await new Promise(r => setTimeout(r, 1200));
+    chat.removeChild(typing);
+    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.textContent = msg.text;
+    wrap.appendChild(avatar);
+    wrap.appendChild(bubble);
+    chat.appendChild(wrap);
+    chat.scrollTop = chat.scrollHeight;
+    const blob = await getVoiceBlob(msg.text, msg.voice);
+    const audio = new Audio(URL.createObjectURL(blob));
+    await new Promise(r => {
+      audio.onended = r;
       audio.play();
     });
   }
+  recorder.stop();
 }