Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>MeetGenius AI – YouTube Intelligence</title> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { darkMode: 'class' } | |
| </script> | |
| </head> | |
| <body class="min-h-screen flex items-center justify-center | |
| bg-gradient-to-br | |
| from-slate-950 via-slate-900 to-indigo-950 | |
| transition-colors duration-300 px-6"> | |
| <!-- ===== THEME TOGGLE ===== --> | |
| <div class="fixed top-6 right-6 z-50"> | |
| <button id="themeToggle" | |
| class="w-11 h-11 rounded-full flex items-center justify-center | |
| bg-slate-800 text-white shadow-lg | |
| hover:scale-105 transition-all"> | |
| 🌙 | |
| </button> | |
| </div> | |
| <!-- ===== MAIN CARD ===== --> | |
| <div class="w-full max-w-4xl bg-white dark:bg-slate-900/90 | |
| backdrop-blur border border-gray-200 dark:border-slate-700 | |
| rounded-2xl shadow-2xl p-10 transition"> | |
| <!-- HEADER --> | |
| <div class="text-center mb-10"> | |
| <h1 class="text-4xl font-bold text-gray-900 dark:text-white tracking-wide"> | |
| 🎥 MeetGenius AI | |
| </h1> | |
| <p class="text-gray-600 dark:text-slate-400 mt-2"> | |
| AI-powered YouTube Lecture & Video Intelligence | |
| </p> | |
| </div> | |
| <!-- FORM --> | |
| <form method="POST" onsubmit="showLoader()"> | |
| <div class="flex flex-col md:flex-row gap-4 items-center"> | |
| <input type="text" | |
| name="youtube_url" | |
| placeholder="Paste YouTube lecture link here..." | |
| required | |
| class="w-full flex-1 px-5 py-3 rounded-xl | |
| bg-gray-50 dark:bg-slate-800 | |
| text-gray-900 dark:text-slate-100 | |
| border border-gray-300 dark:border-slate-700 | |
| focus:outline-none focus:ring-2 | |
| focus:ring-indigo-600"> | |
| <button type="submit" | |
| class="px-8 py-3 rounded-xl font-medium text-white | |
| bg-gradient-to-r from-indigo-600 to-blue-600 | |
| hover:opacity-90 transition"> | |
| Generate | |
| </button> | |
| </div> | |
| </form> | |
| <!-- LOADER --> | |
| <div id="loader" class="hidden text-center mt-8"> | |
| <div class="w-10 h-10 mx-auto border-4 border-slate-300 dark:border-slate-700 | |
| border-t-indigo-500 rounded-full animate-spin"></div> | |
| <p class="text-gray-600 dark:text-slate-400 mt-3"> | |
| AI is analyzing the video... | |
| </p> | |
| </div> | |
| <!-- ================= SUMMARY ================= --> | |
| {% if summary %} | |
| <div class="mt-10 bg-gray-50 dark:bg-slate-800 | |
| p-6 rounded-xl border-l-4 border-indigo-500"> | |
| <h3 class="font-semibold mb-2 text-gray-900 dark:text-white"> | |
| 🧠 AI Summary | |
| </h3> | |
| <pre class="whitespace-pre-wrap leading-relaxed | |
| text-gray-700 dark:text-slate-300">{{ summary }}</pre> | |
| <!-- ✅ JOB-BASED DOWNLOAD BUTTONS --> | |
| <div class="flex gap-3 mt-4"> | |
| <a href="/download/word/{{ job_id }}"> | |
| <button class="px-5 py-2 rounded-lg bg-emerald-600 text-white hover:bg-emerald-700"> | |
| 📄 Word | |
| </button> | |
| </a> | |
| <a href="/download/pdf/{{ job_id }}"> | |
| <button class="px-5 py-2 rounded-lg bg-emerald-600 text-white hover:bg-emerald-700"> | |
| </button> | |
| </a> | |
| </div> | |
| </div> | |
| {% endif %} | |
| <!-- ================= FULL NOTES ================= --> | |
| {% if transcript %} | |
| <div class="mt-8 bg-gray-50 dark:bg-slate-800 | |
| p-6 rounded-xl border-l-4 border-green-500"> | |
| <h3 class="font-semibold mb-2 text-gray-900 dark:text-white"> | |
| 📘 Full Notes | |
| </h3> | |
| <pre class="whitespace-pre-wrap leading-relaxed | |
| text-gray-700 dark:text-slate-300">{{ transcript }}</pre> | |
| </div> | |
| {% endif %} | |
| <!-- ================= CONCLUSION ================= --> | |
| {% if conclusion %} | |
| <div class="mt-8 bg-gray-50 dark:bg-slate-800 | |
| p-6 rounded-xl border-l-4 border-yellow-500"> | |
| <h3 class="font-semibold mb-2 text-gray-900 dark:text-white"> | |
| ✅ AI Conclusion | |
| </h3> | |
| <pre class="whitespace-pre-wrap leading-relaxed | |
| text-gray-700 dark:text-slate-300">{{ conclusion }}</pre> | |
| </div> | |
| {% endif %} | |
| <!-- ================= RAG Q&A ================= --> | |
| {% if transcript %} | |
| <div class="mt-10 bg-gray-50 dark:bg-slate-800 | |
| p-6 rounded-xl border-l-4 border-pink-500"> | |
| <h3 class="font-semibold mb-3 text-gray-900 dark:text-white"> | |
| 🔍 Ask Questions from this Lecture | |
| </h3> | |
| <!-- ✅ JOB ID (HIDDEN) --> | |
| <input type="hidden" id="job_id" value="{{ job_id }}"> | |
| <div class="flex gap-3"> | |
| <input type="text" | |
| id="rag_question" | |
| placeholder="Ask a question from the lecture..." | |
| class="flex-1 px-4 py-2 rounded-lg | |
| bg-white dark:bg-slate-700 | |
| text-gray-900 dark:text-white | |
| border border-gray-300 dark:border-slate-600 | |
| focus:outline-none focus:ring-2 focus:ring-pink-500"> | |
| <button onclick="askRAG()" | |
| class="px-6 py-2 rounded-lg text-white | |
| bg-gradient-to-r from-pink-600 to-rose-600 | |
| hover:opacity-90 transition"> | |
| Ask | |
| </button> | |
| </div> | |
| <div id="rag_answer" | |
| class="mt-4 hidden p-4 rounded-lg | |
| bg-white dark:bg-slate-700 | |
| text-gray-700 dark:text-slate-200 | |
| whitespace-pre-wrap"> | |
| </div> | |
| </div> | |
| {% endif %} | |
| {% if error %} | |
| <p class="text-red-500 text-center mt-6 font-medium"> | |
| {{ error }} | |
| </p> | |
| {% endif %} | |
| </div> | |
| <!-- ================= SCRIPTS ================= --> | |
| <script> | |
| function showLoader(){ | |
| document.getElementById("loader").classList.remove("hidden"); | |
| } | |
| // THEME | |
| const toggleBtn = document.getElementById("themeToggle"); | |
| const html = document.documentElement; | |
| const savedTheme = localStorage.getItem("theme"); | |
| if (savedTheme === "dark") { | |
| html.classList.add("dark"); | |
| toggleBtn.textContent = "🌙"; | |
| } else { | |
| toggleBtn.textContent = "☀️"; | |
| } | |
| toggleBtn.onclick = () => { | |
| html.classList.toggle("dark"); | |
| const isDark = html.classList.contains("dark"); | |
| toggleBtn.textContent = isDark ? "🌙" : "☀️"; | |
| localStorage.setItem("theme", isDark ? "dark" : "light"); | |
| }; | |
| // ✅ JOB-BASED RAG | |
| function askRAG(){ | |
| const q = document.getElementById("rag_question").value.trim(); | |
| const jobId = document.getElementById("job_id").value; | |
| if(!q || !jobId) return; | |
| fetch("/ask", { | |
| method: "POST", | |
| headers: {"Content-Type": "application/x-www-form-urlencoded"}, | |
| body: "question=" + encodeURIComponent(q) + | |
| "&job_id=" + encodeURIComponent(jobId) | |
| }) | |
| .then(res => res.json()) | |
| .then(data => { | |
| const ans = document.getElementById("rag_answer"); | |
| ans.classList.remove("hidden"); | |
| ans.textContent = data.answer; | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |