Update static/index.html

static/index.html

@@ -6,7 +6,7 @@
     <title>Browser-Use Server Interface</title>
     <style>
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            font-family: -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif;
             max-width: 800px;
             margin: 0 auto;
             padding: 20px;
@@ -108,8 +108,7 @@
         <form id="taskForm">
             <div class="form-group">
                 <label for="task">Task Description:</label>
-                <textarea id="task" name="task" placeholder="Describe what you want the browser to do...
-Example: Go to google.com and search for 'Python programming'" required></textarea>
+                <textarea id="task" name="task" placeholder="Describe what you want the browser to do...\nExample: Go to google.com and search for \'Python programming\'" required></textarea>
             </div>
             
             <div class="form-group">
@@ -120,6 +119,8 @@ Example: Go to google.com and search for 'Python programming'" required></textar
                     <option value="gpt-4-turbo">GPT-4 Turbo</option>
                     <option value="claude-3-haiku-20240307">Claude 3 Haiku</option>
                     <option value="claude-3-sonnet-20240229">Claude 3 Sonnet</option>
+                    <option value="gemini-pro">Gemini Pro</option>
+                    <option value="gemini-1.5-pro-latest">Gemini 1.5 Pro Latest</option>
                 </select>
             </div>
             
@@ -130,19 +131,19 @@ Example: Go to google.com and search for 'Python programming'" required></textar
         
         <div class="examples">
             <h3>Example Tasks (Click to use):</h3>
-            <div class="example" onclick="setTask('Go to google.com and search for Python programming')">
+            <div class="example" onclick="setTask(\'Go to google.com and search for Python programming\')">
                 🔍 Search Google for "Python programming"
             </div>
-            <div class="example" onclick="setTask('Navigate to github.com and find the trending repositories')">
+            <div class="example" onclick="setTask(\'Navigate to github.com and find the trending repositories\')">
                 📈 Check GitHub trending repositories
             </div>
-            <div class="example" onclick="setTask('Go to example.com and get the page title and main heading')">
+            <div class="example" onclick="setTask(\'Go to example.com and get the page title and main heading\')">
                 📄 Get page title from example.com
             </div>
-            <div class="example" onclick="setTask('Visit news.ycombinator.com and get the top 3 story titles')">
+            <div class="example" onclick="setTask(\'Visit news.ycombinator.com and get the top 3 story titles\')">
                 📰 Get top stories from Hacker News
             </div>
-            <div class="example" onclick="setTask('Go to wikipedia.org and search for artificial intelligence')">
+            <div class="example" onclick="setTask(\'Go to wikipedia.org and search for artificial intelligence\')">
                 📚 Search Wikipedia for "artificial intelligence"
             </div>
         </div>
@@ -150,29 +151,29 @@ Example: Go to google.com and search for 'Python programming'" required></textar
 
     <script>
         function setTask(taskText) {
-            document.getElementById('task').value = taskText;
+            document.getElementById(\'task\').value = taskText;
         }
 
-        document.getElementById('taskForm').addEventListener('submit', async function(e) {
+        document.getElementById(\'taskForm\').addEventListener(\'submit\', async function(e) {
             e.preventDefault();
             
-            const task = document.getElementById('task').value;
-            const model = document.getElementById('model').value;
-            const submitBtn = document.getElementById('submitBtn');
-            const resultDiv = document.getElementById('result');
+            const task = document.getElementById(\'task\').value;
+            const model = document.getElementById(\'model\').value;
+            const submitBtn = document.getElementById(\'submitBtn\');
+            const resultDiv = document.getElementById(\'result\');
             
             // Show loading state
             submitBtn.disabled = true;
-            submitBtn.textContent = 'Running Task...';
-            resultDiv.style.display = 'block';
-            resultDiv.className = 'result loading';
-            resultDiv.textContent = 'Task is running... This may take a while depending on the complexity.';
+            submitBtn.textContent = \'Running Task...\';
+            resultDiv.style.display = \'block\';
+            resultDiv.className = \'result loading\';
+            resultDiv.textContent = \'Task is running... This may take a while depending on the complexity.\';
             
             try {
-                const response = await fetch('/run-task', {
-                    method: 'POST',
+                const response = await fetch(\'/run-task\', {
+                    method: \'POST\',
                     headers: {
-                        'Content-Type': 'application/json',
+                        \'Content-Type\': \'application/json\',
                     },
                     body: JSON.stringify({
                         task: task,
@@ -183,18 +184,18 @@ Example: Go to google.com and search for 'Python programming'" required></textar
                 const data = await response.json();
                 
                 if (data.success) {
-                    resultDiv.className = 'result success';
+                    resultDiv.className = \'result success\';
                     resultDiv.textContent = `✅ Task completed successfully!\n\nResult:\n${data.result}`;
                 } else {
-                    resultDiv.className = 'result error';
+                    resultDiv.className = \'result error\';
                     resultDiv.textContent = `❌ Task failed:\n\n${data.error}`;
                 }
             } catch (error) {
-                resultDiv.className = 'result error';
+                resultDiv.className = \'result error\';
                 resultDiv.textContent = `❌ Network error:\n\n${error.message}`;
             } finally {
                 submitBtn.disabled = false;
-                submitBtn.textContent = 'Run Task';
+                submitBtn.textContent = \'Run Task\';
             }
         });
     </script>