AI-UI-UX-JS/AI_Gemini_Youtube_Optimizer.html at main · AaronCWacker/AI-UI-UX-JS · 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CreatorFlow | Art & Science Video Optimizer</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

    <style>
        body { font-family: 'Inter', sans-serif; background-color: #0f172a; color: #e2e8f0; }
        .glass-panel { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); }
        .gradient-text { background: linear-gradient(45deg, #60a5fa, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .spinner { border: 3px solid rgba(255,255,255,0.1); border-left-color: #60a5fa; border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    </style>
</head>
<body class="min-h-screen flex flex-col items-center p-4 sm:p-8">

    <header class="w-full max-w-5xl mb-8 flex justify-between items-center">
        <div>
            <h1 class="text-3xl font-bold tracking-tight gradient-text">CreatorFlow</h1>
            <p class="text-sm text-slate-400">Optimization Engine for Art, Music & Science</p>
        </div>
        <div class="flex gap-4">
            <input type="password" id="apiKey" placeholder="Paste Gemini API Key" class="bg-slate-800 border border-slate-700 rounded px-3 py-1 text-sm focus:outline-none focus:border-blue-500 transition">
        </div>
    </header>

    <main class="w-full max-w-5xl grid grid-cols-1 lg:grid-cols-2 gap-8">

        <section class="glass-panel rounded-2xl p-6 h-fit shadow-xl">
            <h2 class="text-xl font-semibold mb-4 text-white">Video Context</h2>

            <form id="generatorForm" class="space-y-5">

                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">Video Category</label>
                    <div class="grid grid-cols-3 gap-2">
                        <button type="button" class="niche-btn active bg-blue-600 text-white py-2 rounded-lg text-sm font-medium border border-blue-500 transition hover:bg-blue-500" data-value="art">Art/Process</button>
                        <button type="button" class="niche-btn bg-slate-700 text-slate-300 py-2 rounded-lg text-sm font-medium border border-transparent transition hover:bg-slate-600" data-value="music">Music/Vibe</button>
                        <button type="button" class="niche-btn bg-slate-700 text-slate-300 py-2 rounded-lg text-sm font-medium border border-transparent transition hover:bg-slate-600" data-value="science">Science Song</button>
                    </div>
                    <input type="hidden" id="selectedNiche" value="art">
                </div>

                <div>
                    <div class="flex justify-between text-xs text-slate-400 mb-1">
                        <span>Calm / Educational</span>
                        <span>High Energy / Viral</span>
                    </div>
                    <input type="range" id="toneSlider" min="1" max="100" value="40" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer">
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">Transcript, Lyrics, or Rough Notes</label>
                    <textarea id="transcript" rows="10" class="w-full bg-slate-800 border border-slate-700 rounded-xl p-4 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none" placeholder="Paste your video transcript, song lyrics, or a bulleted list of what happens in the video..."></textarea>
                </div>

                <button type="submit" class="w-full bg-gradient-to-r from-blue-600 to-violet-600 hover:from-blue-500 hover:to-violet-500 text-white font-bold py-3 rounded-xl shadow-lg transform transition hover:scale-[1.01] flex justify-center items-center gap-2">
                    <span id="btnText">Generate Optimization Data</span>
                    <div id="loadingSpinner" class="spinner hidden"></div>
                </button>

                <p class="text-xs text-slate-500 text-center">Powered by Google Gemini. Key stored locally.</p>
            </form>
        </section>

        <section class="glass-panel rounded-2xl p-6 shadow-xl min-h-[600px] flex flex-col">
            <div class="flex justify-between items-center mb-4 border-b border-slate-700 pb-4">
                <h2 class="text-xl font-semibold text-white">Optimized Output</h2>
                <button onclick="copyAll()" class="text-xs bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded text-white transition">Copy All</button>
            </div>

            <div id="outputArea" class="flex-grow overflow-y-auto space-y-6 text-sm text-slate-300 prose prose-invert max-w-none">
                <div class="flex flex-col items-center justify-center h-full text-slate-500 opacity-50">
                    <svg class="w-12 h-12 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
                    <p>Ready to transmute your ideas into views.</p>
                </div>
            </div>
        </section>

    </main>

    <script>
        // --- 1. UI Interaction Logic ---
        const nicheBtns = document.querySelectorAll('.niche-btn');
        const selectedNicheInput = document.getElementById('selectedNiche');

        nicheBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                // Remove active classes from all
                nicheBtns.forEach(b => {
                    b.classList.remove('bg-blue-600', 'text-white', 'border-blue-500');
                    b.classList.add('bg-slate-700', 'text-slate-300', 'border-transparent');
                });
                // Add active class to clicked
                btn.classList.remove('bg-slate-700', 'text-slate-300', 'border-transparent');
                btn.classList.add('bg-blue-600', 'text-white', 'border-blue-500');
                // Update hidden input
                selectedNicheInput.value = btn.dataset.value;
            });
        });

        // --- 2. The Strategy Engine (Prompt Builder) ---
        function buildPrompt(niche, tone, content) {
            let role = "";
            let strategy = "";

            if (niche === 'art') {
                role = "Expert Art Curator and YouTube Strategist.";
                strategy = "Focus on the aesthetic, the materials used, and the calming/satisfying nature of the process. Avoid hyper-aggressive clickbait. Prioritize 'Watch Time' through curiosity.";
            } else if (niche === 'music') {
                role = "Music Promoter and Vibe Curator.";
                strategy = "Focus on mood, atmosphere, genre tags (lo-fi, ambient, rock), and use cases (studying, sleeping, driving).";
            } else if (niche === 'science') {
                role = "Science Communicator and Edutainment Specialist.";
                strategy = "Focus on the educational hook—what will they understand after this song? Make it sound catchy but smart. Highlight the core scientific concept.";
            }

            return `
            ACT AS: ${role}
            CONTEXT: User is uploading a video to YouTube.
            TONE LEVEL (0=Chill, 100=Hype): ${tone}/100.
            STRATEGY: ${strategy}
            INPUT CONTENT: "${content}"

            TASK: Generate a structured Submission Guide. Use Markdown.

            Please provide:

            ### 1. Title Strategy (Provide 3 Options)
            * **The Search-Friendly One:** (Keyword heavy, clear value proposition)
            * **The Story/Curiosity One:** (Creates a gap in knowledge, makes them click to find out)
            * **The 'Vibe' One:** (Short, punchy, aesthetic - fits the niche style)

            ### 2. The Perfect Description
            * **The Hook (Lines 1-2):** A compelling reason to hit play immediately.
            * **The Context:** A 3-sentence summary of what happens in the video/song.
            * **Technical Deck / Gear Used:** (List specific software, instruments, brushes, or scientific references mentioned or implied).
            * **Suggested Timestamps:** (Break down the content into 4-5 chapters).

            ### 3. Tag Cloud (Comma separated)
            * **Broad:** (e.g., #Art, #Science)
            * **Niche:** (e.g., #Watercolor, #PhysicsSong)
            * **Specific:** (Long-tail keywords)

            ### 4. Thumbnail Concept
            * **Option A (Focus on Result):** describe the visual.
            * **Option B (Focus on Action/Process):** describe the visual.
            `;
        }

        // --- 3. API Handler (Gemini) ---
        async function generateOptimization(e) {
            e.preventDefault();

            const apiKey = document.getElementById('apiKey').value;
            const transcript = document.getElementById('transcript').value;
            const niche = document.getElementById('selectedNiche').value;
            const tone = document.getElementById('toneSlider').value;

            const outputArea = document.getElementById('outputArea');
            const loader = document.getElementById('loadingSpinner');
            const btnText = document.getElementById('btnText');

            if (!apiKey) {
                alert("Please enter a Google Gemini API Key.");
                return;
            }
            if (!transcript) {
                alert("Please enter some content context.");
                return;
            }

            // UI Loading State
            btnText.textContent = "Analyzing Content...";
            loader.classList.remove('hidden');
            outputArea.innerHTML = '<div class="animate-pulse space-y-4"><div class="h-4 bg-slate-700 rounded w-3/4"></div><div class="h-4 bg-slate-700 rounded w-1/2"></div><div class="h-4 bg-slate-700 rounded w-5/6"></div></div>';

            const prompt = buildPrompt(niche, tone, transcript);

            try {
                const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${apiKey}`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        contents: [{ parts: [{ text: prompt }] }]
                    })
                });

                const data = await response.json();

                if (data.error) {
                    throw new Error(data.error.message);
                }

                const rawText = data.candidates[0].content.parts[0].text;
                const htmlContent = marked.parse(rawText); // Convert Markdown to HTML

                outputArea.innerHTML = htmlContent;

            } catch (error) {
                outputArea.innerHTML = `<div class="text-red-400 p-4 border border-red-500 rounded bg-red-900/20">Error: ${error.message}</div>`;
            } finally {
                btnText.textContent = "Generate Optimization Data";
                loader.classList.add('hidden');
            }
        }

        function copyAll() {
            const content = document.getElementById('outputArea').innerText;
            navigator.clipboard.writeText(content);
            alert("Content copied to clipboard!");
        }

        document.getElementById('generatorForm').addEventListener('submit', generateOptimization);

    </script>
</body>
</html>