Spaces:

aigorithm
/

faketextaigorithm

Running

App Files Files Community

aigorithm commited on Mar 30, 2025

Commit

c204e52

verified ·

1 Parent(s): 6ef077a

Upload 2 files

Browse files

Files changed (2) hide show

index.html +78 -74
main.js +34 -30

index.html CHANGED Viewed

@@ -2,115 +2,119 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>AiCut Pro Replica</title>
   <style>
     body {
       margin: 0;
       background: #000;
-      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-    .container {
       display: flex;
       flex-direction: column;
       align-items: center;
       padding: 16px;
-      color: white;
     }
-    .phone {
       width: 360px;
-      height: 720px;
-      background: #f0f2f5;
-      border-radius: 40px;
       overflow: hidden;
-      box-shadow: 0 0 12px rgba(0,0,0,0.25);
-      display: flex;
-      flex-direction: column;
-      margin-top: 10px;
     }
-    .topbar {
-      background: #fff;
-      text-align: center;
-      padding: 10px;
-      font-weight: bold;
-      font-size: 16px;
-      border-bottom: 1px solid #ddd;
     }
-    .chat {
-      flex: 1;
       padding: 10px;
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
       overflow-y: auto;
     }
     .message {
       display: flex;
       align-items: flex-end;
-      gap: 8px;
     }
     .bubble {
-      padding: 10px 14px;
       border-radius: 18px;
       max-width: 70%;
       font-size: 14px;
-      line-height: 1.4;
-      animation: fadeSlideUp 0.4s ease forwards;
       opacity: 0;
     }
-    .left {
-      flex-direction: row;
-    }
-    .right {
-      flex-direction: row-reverse;
-    }
-    .left .bubble {
-      background: #e5e5ea;
-      color: black;
-    }
-    .right .bubble {
-      background: #007aff;
-      color: white;
-    }
-    .avatar {
-      width: 28px;
-      height: 28px;
-      border-radius: 50%;
-    }
-    @keyframes fadeSlideUp {
-      from { opacity: 0; transform: translateY(20px); }
       to { opacity: 1; transform: translateY(0); }
     }
-    textarea {
-      width: 90%;
-      height: 100px;
-      margin-top: 10px;
-      font-size: 14px;
-      font-family: monospace;
     }
-    button {
-      padding: 8px 16px;
-      margin-top: 10px;
     }
   </style>
 </head>
 <body>
-  <div class="container">
-    <h2>AiCut Pro Chat Generator</h2>
-    <textarea id="scriptInput">[
-  { "side": "left", "text": "Hey, are you there?" },
-  { "side": "right", "text": "Yeah, just got here." }
 ]</textarea>
-    <button onclick="startPlayback()">🎬 Export Video with Voice</button>
-    <div class="phone">
-      <div class="topbar">Messages</div>
-      <div id="chat" class="chat"></div>
-    </div>
   </div>
   <script type="module" src="main.js"></script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <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>

main.js CHANGED Viewed

@@ -1,60 +1,64 @@
 const chat = document.getElementById("chat");
-const scriptInput = document.getElementById("scriptInput");
-const voiceId = "21m00Tcm4TlvDq8ikWAM"; // Rachel
 const apiKey = "sk_4e67c39c0e9cbc87462cd2643e1f4d1d9959d7d81203adc2";
-async function getVoiceBlob(text) {
   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 startPlayback() {
   chat.innerHTML = "";
-  let messages;
-  try {
-    messages = JSON.parse(scriptInput.value);
-  } catch (e) {
-    alert("Invalid script format");
-    return;
-  }
-  const phone = document.querySelector(".phone");
-  const stream = phone.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_aicutpro_ui.mp4";
     a.click();
   };
   recorder.start();
-  for (const msg of messages) {
     const wrapper = document.createElement("div");
-    wrapper.className = "message " + (msg.side || "left");
     const avatar = document.createElement("img");
-    avatar.src = msg.side === "right"
-      ? "https://i.pravatar.cc/30?img=3"
-      : "https://i.pravatar.cc/30?img=7";
     avatar.className = "avatar";
     const bubble = document.createElement("div");
@@ -66,8 +70,8 @@ async function startPlayback() {
     chat.appendChild(wrapper);
     chat.scrollTop = chat.scrollHeight;
-    const voice = await getVoiceBlob(msg.text);
-    const audio = new Audio(URL.createObjectURL(voice));
     await new Promise(res => {
       audio.onended = res;
       audio.play();

 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");
     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();