Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SmartLearn - Project Idea Generator</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| color: #333; | |
| margin: 0; | |
| padding: 0; | |
| position: relative; | |
| } | |
| #myVideo { | |
| position: fixed; | |
| right: 0; | |
| bottom: 0; | |
| min-width: 100%; | |
| min-height: 100%; | |
| width: auto; | |
| height: auto; | |
| z-index: -2; | |
| } | |
| .container { | |
| max-width: 1200px; /* Adjusted for better layout */ | |
| margin: 40px auto; | |
| padding: 20px; | |
| background-color: rgba(255, 255, 255, 0.4); | |
| border-radius: 10px; | |
| box-shadow: 0 0 10px rgba(0,0,0,0.1); | |
| position: relative; | |
| z-index: 1; | |
| display: flex; | |
| flex-wrap: wrap; /* Ensure responsiveness */ | |
| gap: 20px; /* Space between elements */ | |
| } | |
| h1 { | |
| color: #2c3e50; | |
| text-align: center; | |
| margin-bottom: 30px; | |
| width: 100%; /* Ensure full width for heading */ | |
| } | |
| .back-button { | |
| position: absolute; | |
| top: 20px; | |
| left: 20px; | |
| background-color: #3498db; | |
| color: white; | |
| border: none; | |
| padding: 10px 15px; | |
| border-radius: 50px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.2); | |
| display: flex; | |
| align-items: center; | |
| font-weight: bold; | |
| } | |
| .back-button:hover { | |
| background-color: #2980b9; | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.3); | |
| } | |
| .back-button i { | |
| margin-right: 8px; | |
| transition: transform 0.3s ease; | |
| } | |
| .back-button:hover i { | |
| transform: rotate(-360deg); | |
| } | |
| .back-button span { | |
| opacity: 0; | |
| width: 0; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .back-button:hover span { | |
| opacity: 1; | |
| width: auto; | |
| margin-left: 5px; | |
| } | |
| .project-form, | |
| .chat-container { | |
| flex: 1; | |
| background-color: #ecf0f1; | |
| padding: 20px; | |
| border-radius: 8px; | |
| box-shadow: 0 0 10px rgba(0,0,0,0.1); | |
| } | |
| .project-form { | |
| margin-bottom: 20px; /* Remove if not needed */ | |
| } | |
| .form-group { | |
| margin-bottom: 15px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 5px; | |
| color: #2c3e50; | |
| font-weight: bold; | |
| } | |
| .form-group input, .form-group textarea { | |
| width: calc(100% - 22px); | |
| padding: 10px; | |
| border: 1px solid #bdc3c7; | |
| border-radius: 4px; | |
| font-size: 16px; | |
| box-sizing: border-box; | |
| } | |
| .form-group textarea { | |
| height: 100px; | |
| resize: vertical; | |
| } | |
| button { | |
| background-color: #2ecc71; | |
| color: white; | |
| border: none; | |
| padding: 10px 20px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| font-size: 16px; | |
| } | |
| button:hover { | |
| background-color: #27ae60; | |
| } | |
| .chat-container { | |
| background-color: #ffffff; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| box-shadow: 0 0 10px rgba(0,0,0,0.1); | |
| } | |
| .chat-messages { | |
| height: 300px; | |
| overflow-y: auto; | |
| padding: 20px; | |
| } | |
| .message { | |
| margin-bottom: 15px; | |
| padding: 10px; | |
| border-radius: 5px; | |
| max-width: 80%; | |
| } | |
| .user-message { | |
| background-color: #3498db; | |
| color: white; | |
| align-self: flex-end; | |
| margin-left: auto; | |
| } | |
| .ai-message { | |
| background-color: #ecf0f1; | |
| color: #333; | |
| } | |
| .chat-input { | |
| display: flex; | |
| padding: 10px; | |
| background-color: #ecf0f1; | |
| } | |
| .chat-input input { | |
| flex-grow: 1; | |
| padding: 10px; | |
| border: 1px solid #bdc3c7; | |
| border-radius: 4px; | |
| margin-right: 10px; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <video autoplay muted loop id="myVideo"> | |
| <source src="../static/AI_video.mp4" type="video/mp4"> | |
| Your browser does not support HTML5 video. | |
| </video> | |
| <div class="container"> | |
| <button class="back-button" onclick="goBack()"> | |
| <i class="fas fa-arrow-left"></i> | |
| <span>Back</span> | |
| </button> | |
| <h1><i class="fas fa-lightbulb"></i> Project Idea Generator</h1> | |
| <div class="project-form"> | |
| <div class="form-group"> | |
| <label for="subject"><i class="fas fa-book"></i> Subject:</label> | |
| <input type="text" id="subject" placeholder="e.g., Computer Science, Biology, Art"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="topic"><i class="fas fa-tag"></i> Specific Topic:</label> | |
| <input type="text" id="topic" placeholder="e.g., Machine Learning, Genetics, Modern Art"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="plan"><i class="fas fa-tasks"></i> Brief Project Plan:</label> | |
| <textarea id="plan" placeholder="Outline your initial thoughts or requirements for the project"></textarea> | |
| </div> | |
| <button onclick="generateProjectIdea()"><i class="fas fa-magic"></i> Generate Project Idea</button> | |
| </div> | |
| <div class="chat-container"> | |
| <div id="chat-messages" class="chat-messages"></div> | |
| <div class="chat-input"> | |
| <input type="text" id="user-input" placeholder="Ask follow-up questions about the project idea..."> | |
| <button onclick="sendMessage()"><i class="fas fa-paper-plane"></i> Send</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const chatMessages = document.getElementById('chat-messages'); | |
| const userInput = document.getElementById('user-input'); | |
| let currentProjectIdea = ''; | |
| function addMessage(content, isUser) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `message ${isUser ? 'user-message' : 'ai-message'} fade-in`; | |
| messageDiv.innerHTML = content.replace(/\n/g, '<br>'); | |
| chatMessages.appendChild(messageDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| function generateProjectIdea() { | |
| const subject = document.getElementById('subject').value; | |
| const topic = document.getElementById('topic').value; | |
| const plan = document.getElementById('plan').value; | |
| addMessage(`Generating project idea for ${subject} - ${topic}`, true); | |
| fetch('/generate_project_idea', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ subject, topic, plan }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| currentProjectIdea = data.project_idea; | |
| addMessage(currentProjectIdea, false); | |
| }) | |
| .catch(error => { | |
| console.error('Error:', error); | |
| }); | |
| } | |
| function sendMessage() { | |
| const message = userInput.value.trim(); | |
| if (message) { | |
| addMessage(message, true); | |
| userInput.value = ''; | |
| fetch('/ask_followup', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ project_idea: currentProjectIdea, query: message }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| addMessage(data.response, false); | |
| }) | |
| .catch(error => { | |
| console.error('Error:', error); | |
| }); | |
| } | |
| } | |
| userInput.addEventListener('keypress', function(e) { | |
| if ( e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| addMessage("Welcome! Use the form above to generate a project idea, then feel free to ask follow-up questions.", false); | |
| function goBack() { | |
| window.history.back(); | |
| } | |
| </script> | |
| </body> | |
| </html> | |