Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>IMO Math Problem Solver</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> | |
| <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header class="header"> | |
| <div class="header-content"> | |
| <h1 class="title"> | |
| <svg class="title-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/> | |
| </svg> | |
| IMO Math Problem Solver | |
| </h1> | |
| <p class="subtitle">AI-powered solution for International Mathematical Olympiad problems</p> | |
| </div> | |
| </header> | |
| <main class="main"> | |
| <div class="input-section card"> | |
| <h2 class="section-title">Problem Statement</h2> | |
| <textarea | |
| id="problemInput" | |
| class="problem-input" | |
| placeholder="Enter your mathematical problem here... Example: Find the minimum positive integer n such that it is possible to make the sum of numbers on n red cards strictly greater than 100." | |
| rows="8" | |
| ></textarea> | |
| <div class="controls"> | |
| <div class="control-row"> | |
| <div class="control-group"> | |
| <label for="providerSelect" class="control-label"> | |
| <svg class="label-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <circle cx="12" cy="12" r="10"/> | |
| <path d="M12 6v6l4 2"/> | |
| </svg> | |
| AI Provider | |
| </label> | |
| <select id="providerSelect" class="control-select"> | |
| <option value="gemini">Google Gemini 2.5 Pro</option> | |
| <option value="openai">OpenAI GPT-5</option> | |
| <option value="xai">XAI Grok-4</option> | |
| </select> | |
| </div> | |
| <div class="control-group"> | |
| <label for="maxRunsInput" class="control-label"> | |
| <svg class="label-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/> | |
| </svg> | |
| Max Attempts | |
| </label> | |
| <input type="number" id="maxRunsInput" class="control-input" value="10" min="1" max="50"> | |
| </div> | |
| <div class="control-group"> | |
| <label for="numAgentsInput" class="control-label"> | |
| <svg class="label-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/> | |
| <circle cx="9" cy="7" r="4"/> | |
| <path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/> | |
| </svg> | |
| Parallel Agents | |
| </label> | |
| <input type="number" id="numAgentsInput" class="control-input" value="1" min="1" max="20"> | |
| </div> | |
| </div> | |
| <div class="control-group full-width"> | |
| <label for="otherPromptsInput" class="control-label"> | |
| <svg class="label-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/> | |
| </svg> | |
| Additional Prompts (optional, comma-separated) | |
| </label> | |
| <input type="text" id="otherPromptsInput" class="control-input" placeholder="e.g., focus_on_geometry, use_induction"> | |
| </div> | |
| <button id="solveButton" class="solve-button"> | |
| <svg class="button-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <polygon points="5 3 19 12 5 21 5 3"/> | |
| </svg> | |
| Solve Problem | |
| </button> | |
| </div> | |
| </div> | |
| <div id="statusSection" class="status-section card" style="display: none;"> | |
| <div class="status-header"> | |
| <h2 class="section-title">Status</h2> | |
| <div id="statusIndicator" class="status-indicator"> | |
| <div class="spinner"></div> | |
| <span id="statusText">Initializing...</span> | |
| </div> | |
| </div> | |
| <div class="progress-info"> | |
| <div class="info-item"> | |
| <span class="info-label">Session ID:</span> | |
| <span id="sessionId" class="info-value">-</span> | |
| </div> | |
| <div class="info-item"> | |
| <span class="info-label">Provider:</span> | |
| <span id="providerInfo" class="info-value">-</span> | |
| </div> | |
| <div class="info-item"> | |
| <span class="info-label">Agents:</span> | |
| <span id="agentsInfo" class="info-value">-</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="logSection" class="log-section card" style="display: none;"> | |
| <h2 class="section-title"> | |
| <svg class="section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/> | |
| <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/> | |
| </svg> | |
| Live Log | |
| </h2> | |
| <div id="logOutput" class="log-output"></div> | |
| </div> | |
| <div id="solutionSection" class="solution-section card" style="display: none;"> | |
| <div class="solution-header"> | |
| <h2 class="section-title"> | |
| <svg class="section-icon success" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> | |
| <polyline points="22 4 12 14.01 9 11.01"/> | |
| </svg> | |
| Solution Found! | |
| </h2> | |
| </div> | |
| <div id="solutionOutput" class="solution-output"></div> | |
| <div class="solution-footer"> | |
| <span id="solutionLogPath" class="log-path"></span> | |
| </div> | |
| </div> | |
| <div id="errorSection" class="error-section card" style="display: none;"> | |
| <h2 class="section-title error"> | |
| <svg class="section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <circle cx="12" cy="12" r="10"/> | |
| <line x1="12" y1="8" x2="12" y2="12"/> | |
| <line x1="12" y1="16" x2="12.01" y2="16"/> | |
| </svg> | |
| Error | |
| </h2> | |
| <div id="errorOutput" class="error-output"></div> | |
| </div> | |
| </main> | |
| <footer class="footer"> | |
| <p>Powered by Google Gemini, OpenAI, and XAI | MIT License © 2025 Lin Yang, Yichen Huang</p> | |
| </footer> | |
| </div> | |
| <script src="{{ url_for('static', filename='js/app.js') }}"></script> | |
| </body> | |
| </html> | |