Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NoteGenie - AI-Powered Jupyter Notebook Generator</title> | |
| <!-- Google fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <!-- Material Icons --> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| <!-- Bootstrap (still used for grid and components) --> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <!-- Prism for code highlighting --> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet"> | |
| <!-- Custom styles --> | |
| <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet"> | |
| <link rel="icon" type="image/png" href="{{ url_for('static', filename='images/favicon.png') }}"> | |
| <script> | |
| document.fonts.ready.then(() => { | |
| var canvas = document.createElement('canvas'); | |
| canvas.width = 64; | |
| canvas.height = 64; | |
| var ctx = canvas.getContext('2d'); | |
| ctx.fillStyle = '#4285f4'; // use desired color matching the logo-icon | |
| ctx.font = '48px "Material Icons"'; | |
| ctx.textAlign = 'center'; | |
| ctx.textBaseline = 'middle'; | |
| ctx.fillText('auto_awesome', 32, 32); | |
| var dataURL = canvas.toDataURL(); | |
| var link = document.querySelector('link[rel="icon"]'); | |
| if(link) { | |
| link.href = dataURL; | |
| } else { | |
| var newLink = document.createElement('link'); | |
| newLink.rel = 'icon'; | |
| newLink.href = dataURL; | |
| document.head.appendChild(newLink); | |
| } | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- App Header --> | |
| <header class="app-header"> | |
| <div class="header-content"> | |
| <div class="logo-section"> | |
| <span class="material-icons logo-icon">auto_awesome</span> | |
| <h1 class="product-name">NoteGenie</h1> | |
| </div> | |
| <div class="header-actions"> | |
| <button class="google-button outlined" data-bs-toggle="modal" data-bs-target="#infoModal"> | |
| <span class="material-icons">info</span> | |
| <span>Info</span> | |
| </button> | |
| <button class="google-button outlined" data-bs-toggle="modal" data-bs-target="#apiKeyModal"> | |
| <span class="material-icons">vpn_key</span> | |
| <span>API Key</span> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="main-container"> | |
| <!-- Left Panel - Chat Interface --> | |
| <div class="panel chat-panel"> | |
| <div id="conversation" class="conversation-container"> | |
| <div class="welcome-message"> | |
| <h2><span class="material-icons">auto_awesome</span> Welcome to NoteGenie</h2> | |
| <p>Generate complete Jupyter notebooks from your text prompts using Google's Gemini AI.</p> | |
| <div class="welcome-steps"> | |
| <div class="welcome-step"> | |
| <div class="step-number">1</div> | |
| <div class="step-text">Set your Google Gemini API key</div> | |
| </div> | |
| <div class="welcome-step"> | |
| <div class="step-number">2</div> | |
| <div class="step-text">Describe the notebook you want</div> | |
| </div> | |
| <div class="welcome-step"> | |
| <div class="step-number">3</div> | |
| <div class="step-text">View and refine the generated notebook</div> | |
| </div> | |
| <div class="welcome-step"> | |
| <div class="step-number">4</div> | |
| <div class="step-text">Download as .ipynb file</div> | |
| </div> | |
| </div> | |
| <div class="info-card"> | |
| <span class="material-icons info-icon">lightbulb</span> | |
| <div class="info-content"> | |
| <p><strong>Tip:</strong> Be specific in your request for best results. Include the topic, intended audience, and desired level of detail.</p> | |
| </div> | |
| </div> | |
| <div class="example-section"> | |
| <h5>Example prompts:</h5> | |
| <ul class="example-list"> | |
| <li>"Create a notebook for data visualization with Plotly Express showing different chart types"</li> | |
| <li>"Make a machine learning notebook that shows text classification using BERT"</li> | |
| <li>"Build a beginner-friendly introduction to pandas with common data operations"</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="input-container"> | |
| <div class="input-options"> | |
| <select id="modelSelect" class="model-selector"> | |
| <option value="gemini-2.0-pro">Gemini 2.0 Pro</option> | |
| <option value="gemini-2.0-flash">Gemini 2.0 Flash</option> | |
| <option value="gemini-2.0-flash-thinking">Gemini 2.0 Flash Thinking</option> | |
| </select> | |
| <div class="mode-toggle"> | |
| <button type="button" class="toggle-button active" id="generateModeBtn">Generate</button> | |
| <button type="button" class="toggle-button" id="editModeBtn" disabled>Edit</button> | |
| </div> | |
| </div> | |
| <div class="input-field-container"> | |
| <textarea id="promptInput" class="prompt-input" placeholder="Describe the notebook you want..." rows="3"></textarea> | |
| <button id="actionBtn" class="send-button"> | |
| <span class="material-icons">send</span> | |
| </button> | |
| </div> | |
| <!-- Keep the original div but it will be hidden via CSS --> | |
| <div class="input-actions"> | |
| <!-- Original button is now moved into the input field --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Panel - Notebook Preview --> | |
| <div class="panel notebook-panel"> | |
| <div class="notebook-header"> | |
| <h3 id="notebookTitle" class="notebook-title"></h3> | |
| <div class="notebook-actions"> | |
| <button id="downloadBtn" class="google-button" disabled> | |
| <span class="material-icons">download</span> | |
| <span>Download</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="notebookPreview" class="notebook-preview"> | |
| <div class="placeholder-content"> | |
| <span class="material-icons large-icon">description</span> | |
| <p>Generate a notebook to see the preview here</p> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- API Key Modal --> | |
| <div class="modal fade" id="apiKeyModal" tabindex="-1" aria-hidden="true"> | |
| <div class="modal-dialog modal-dialog-centered"> | |
| <div class="modal-content google-modal"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title"> | |
| <span class="material-icons">vpn_key</span> | |
| Set Google Gemini API Key | |
| </h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="info-card"> | |
| <span class="material-icons info-icon">info</span> | |
| <div class="info-content"> | |
| <p><strong>You need to set your Google API key to use NoteGenie.</strong></p> | |
| <p>Your key will be remembered for future sessions on this device.</p> | |
| </div> | |
| </div> | |
| <div class="steps-card"> | |
| <div class="steps-header"> | |
| <span class="material-icons">key</span> | |
| <strong>How to get your API key:</strong> | |
| </div> | |
| <div class="steps-content"> | |
| <ol class="steps-list"> | |
| <li>Go to <a href="https://aistudio.google.com/" target="_blank">Google AI Studio</a></li> | |
| <li>Click on "Get API key" in the top left</li> | |
| <li>Click "Create API key"</li> | |
| <li>Copy the generated API key and paste it below</li> | |
| </ol> | |
| </div> | |
| </div> | |
| <div class="input-field"> | |
| <label for="apiKeyInput" class="input-label">API Key</label> | |
| <input type="password" class="text-input" id="apiKeyInput" placeholder="Enter your Gemini API key"> | |
| <div class="input-helper">Your API key is stored securely and never sent to third parties.</div> | |
| </div> | |
| <div id="apiKeyFeedback"></div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="google-button text" data-bs-dismiss="modal">Cancel</button> | |
| <button type="button" class="google-button primary" id="saveApiKeyBtn">Save</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Info Modal --> | |
| <div class="modal fade" id="infoModal" tabindex="-1" aria-hidden="true"> | |
| <div class="modal-dialog modal-dialog-centered"> | |
| <div class="modal-content google-modal"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title"> | |
| <span class="material-icons">info</span> | |
| About NoteGenie | |
| </h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="info-card mb-4"> | |
| <span class="material-icons info-icon">auto_awesome</span> | |
| <div class="info-content"> | |
| <p>NoteGenie is an AI-powered tool that generates Jupyter notebooks from text prompts using Google's Gemini AI.</p> | |
| </div> | |
| </div> | |
| <div class="creator-section"> | |
| <h5 class="section-title">Developer Information</h5> | |
| <div class="developer-info"> | |
| <div class="developer-detail"><strong>Name:</strong> Ziad Mostafa</div> | |
| <div class="developer-detail"><strong>Email:</strong> <a href="mailto:ziad.zero1245@gmail.com">ziad.zero1245@gmail.com</a></div> | |
| <div class="developer-detail"><strong>GitHub:</strong> <a href="https://github.com/ziadmostafa1" target="_blank">github.com/ziadmostafa1</a></div> | |
| <div class="developer-detail"><strong>Website:</strong> <a href="https://ziadai.me" target="_blank">ziadai.me</a></div> | |
| </div> | |
| </div> | |
| <div class="contact-cta mt-4 text-center"> | |
| <p class="call-to-action">Feel free to reach out for collaborations, projects, or job opportunities!</p> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="google-button primary" data-bs-dismiss="modal">Close</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating scroll button --> | |
| <button class="scroll-button" id="scrollToBottomBtn"> | |
| <span class="material-icons">keyboard_arrow_down</span> | |
| </button> | |
| <!-- Scripts --> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <script src="{{ url_for('static', filename='js/main.js') }}"></script> | |
| </body> | |
| </html> | |