Spaces:

aigorithm
/

faketextaigorithm

Running

App Files Files Community

aigorithm commited on Mar 30

Commit

8a46dd4

verified ·

1 Parent(s): 36c293d

Upload 2 files

Browse files

Files changed (2) hide show

index.html +55 -41
main.js +60 -22

index.html CHANGED Viewed

@@ -3,27 +3,30 @@
 <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;
@@ -37,73 +40,84 @@
       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>

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

main.js CHANGED Viewed

@@ -5,15 +5,17 @@ let messages = [
 ];
 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 => {
@@ -32,43 +34,79 @@ function updatePreview() {
   });
 }
-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();

 ];
 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 => {
   });
 }
+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();
+}