AttentionAI/convert.js at main · krishkhinchi/AttentionAI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
const fs = require('fs');

const html = fs.readFileSync('stitch_design.html', 'utf8');

// Extract body contents
const bodyMatch = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
if (!bodyMatch) {
    console.error("Could not find body tag");
    process.exit(1);
}
let bodyHtml = bodyMatch[1];

// Make adjustments for NextJS
// Replace class with className
bodyHtml = bodyHtml.replace(/class=/g, 'className=');

// Replace style strings with React style objects
bodyHtml = bodyHtml.replace(/style="font-variation-settings:\s*'FILL'\s*1;"/g, 'style={{ fontVariationSettings: "\'FILL\' 1" }}');
bodyHtml = bodyHtml.replace(/style="animation-duration:\s*4s;"/g, 'style={{ animationDuration: "4s" }}');
bodyHtml = bodyHtml.replace(/style="left: 60%; width: 3px; height: 100%; top: -100%;"/g, 'style={{ left: "60%", width: "3px", height: "100%", top: "-100%" }}');
bodyHtml = bodyHtml.replace(/style="top: 30%; right: -50px; background: radial-gradient\(circle, rgba\(0,255,148,0.4\) 0%, transparent 70%\);"/g, 'style={{ top: "30%", right: "-50px", background: "radial-gradient(circle, rgba(0,255,148,0.4) 0%, transparent 70%)" }}');
bodyHtml = bodyHtml.replace(/style="bottom: 20%; left: -50px; background: radial-gradient\(circle, rgba\(0,255,148,0.3\) 0%, transparent 70%\);"/g, 'style={{ bottom: "20%", left: "-50px", background: "radial-gradient(circle, rgba(0,255,148,0.3) 0%, transparent 70%)" }}');

// Self close specific tags
bodyHtml = bodyHtml.replace(/<hr([^>]*[^\/])>/g, '<hr$1/>');
bodyHtml = bodyHtml.replace(/<br>/g, '<br/>');
bodyHtml = bodyHtml.replace(/<input([^>]*[^\/])>/g, '<input$1/>');

// Note: There are SVGs that might have `stroke-width`, `stroke-linecap`, etc. that need to become camelCase.
bodyHtml = bodyHtml.replace(/stroke-width=/g, 'strokeWidth=');
bodyHtml = bodyHtml.replace(/stroke-linecap=/g, 'strokeLinecap=');
bodyHtml = bodyHtml.replace(/stroke-linejoin=/g, 'strokeLinejoin=');
bodyHtml = bodyHtml.replace(/fill-rule=/g, 'fillRule=');
bodyHtml = bodyHtml.replace(/clip-rule=/g, 'clipRule=');

// Fix comments
bodyHtml = bodyHtml.replace(/<!--([\s\S]*?)-->/g, '{/*$1*/}');

const pageContent = `"use client";
import { useState, useRef } from "react";
import { useRouter } from "next/navigation";

export default function Home() {
  const [file, setFile] = useState<File | null>(null);
  const [isUploading, setIsUploading] = useState(false);
  const router = useRouter();
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      const selectedFile = e.target.files[0];
      setFile(selectedFile);

      setIsUploading(true);
      const formData = new FormData();
      formData.append("video", selectedFile);

      try {
        const res = await fetch("https://attentionai-475i.onrender.com//upload", {
          method: "POST",
          body: formData,
        });
        const data = await res.json();
        if (data.jobId) {
          router.push(\`/processing/\${data.jobId}\`);
        }
      } catch (err) {
        console.error(err);
        setIsUploading(false);
      }
    }
  };

  return (
    <div className="overflow-x-hidden selection:bg-primary-container selection:text-on-primary min-h-screen">
      <input
        type="file"
        accept="video/*"
        className="hidden"
        ref={fileInputRef}
        onChange={handleFileChange}
      />
      ${bodyHtml}
    </div>
  );
}`;

// Make the Upload Video button interactive
const finalContent = pageContent.replace(
  /<button className="bg-primary-container text-on-primary px-10 py-5 rounded-lg font-bold text-lg flex items-center justify-center gap-3 transition-transform active:scale-95 shadow-\[0_10px_40px_-10px_rgba\(0,255,148,0\.5\)\]">[\s\S]*?Upload Video[\s\S]*?<span className="material-symbols-outlined">arrow_forward<\/span>\s*<\/button>/,
  '<button onClick={() => fileInputRef.current?.click()} disabled={isUploading} className="bg-primary-container text-on-primary px-10 py-5 rounded-lg font-bold text-lg flex items-center justify-center gap-3 transition-transform active:scale-95 shadow-[0_10px_40px_-10px_rgba(0,255,148,0.5)]">{isUploading ? "Uploading..." : "Upload Video"}<span className="material-symbols-outlined">arrow_forward</span></button>'
);

fs.writeFileSync('web/src/app/page.tsx', finalContent);
console.log('Conversion successful!');