autoimprove-pull/index.html at main · Nitin399-maker/autoimprove-pull · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Auto Improve</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
  <style>
    .min-vh-100 {
      min-height: 100vh;
    }
  </style>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container-fluid">
      <a class="navbar-brand my-2" href="#">Auto Improve</a>
      <form id="app-prompt" class="d-flex flex-grow-1 gap-2">
        <input id="prompt" name="prompt" type="text" class="form-control my-2" list="prompt-suggestions" placeholder="Describe app to build or improvement to make" aria-label="Prompt">
        <datalist id="prompt-suggestions">
          <option value="Draw a circle">
          <option value="Generate a fractal">
          <option value="Create a particle explosion">
          <option value="Simulate rain">
          <option value="Create a game">
          <option value="Create a 3D space">
        </datalist>

        <select id="model" name="model" class="form-select w-auto my-2" aria-label="Select Model">
          <option value="deepseek/deepseek-chat-v3-0324:free">DeepSeek V3</option>
          <option value="google/gemini-2.5-pro-exp-03-25:free">Gemini 2.5 Pro</option>
          <option value="anthropic/claude-3.7-sonnet">Claude 3.7 Sonnet</option>
        </select>

        <button class="btn btn-primary my-2" type="submit" id="submit">Generate</button>
      </form>
      <div class="position-relative ms-md-2 my-2" role="group" aria-label="Toggle dark mode" title="Toggle Dark Mode">
        <button class="dark-theme-toggle btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Open navigation menu">
          <i class="bi bi-circle-half"></i> <span class="d-lg-none ms-2">Toggle theme</span>
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><button class="dropdown-item" data-bs-theme-value="light"><i class="me-2 bi bi-sun-fill"></i> Light</button></li>
          <li><button class="dropdown-item" data-bs-theme-value="dark"><i class="me-2 bi bi-moon-stars-fill"></i> Dark</button></li>
          <li><button class="dropdown-item" data-bs-theme-value="auto"><i class="me-2 bi bi-circle-half"></i> Auto</button></li>
        </ul>
      </div>
      <div class="position-relative ms-md-2 my-2" role="group" aria-label="Toggle file operations" title="Toggle file operations">
        <button class="dark-theme-toggle btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Open navigation menu">
          <i class="bi bi-file-earmark-text"></i> <span class="d-lg-none ms-2">Toggle theme</span>
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><button class="dropdown-item" id="save-conversation"><i class="bi bi-save me-2"></i>Save</button></li>
          <li>
            <label class="dropdown-item" role="button">
              <i class="bi bi-folder2-open me-2"></i>Load
              <input type="file" accept=".json" id="file-input" class="d-none">
            </label>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container pt-5">
    <div id="demos" class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4 my-5">
    </div>
  </div>

  <div class="container min-vh-100 pt-5 mt-4" id="response"></div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@gramex/ui@0.3.1/dist/dark-theme.js"></script>
  <script src="script.js" type="module"></script>
</body>

</html>