File size: 3,264 Bytes
d87506b
b07d55c
 
0d7841a
b07d55c
d87506b
b07d55c
 
d87506b
b07d55c
0d7841a
 
b07d55c
 
d87506b
b07d55c
0d7841a
b07d55c
d87506b
 
 
 
b07d55c
0d7841a
d87506b
 
 
0d7841a
b07d55c
d87506b
 
 
b07d55c
0d7841a
d87506b
 
b07d55c
0d7841a
d87506b
 
 
b07d55c
0d7841a
d87506b
 
 
b07d55c
 
 
d87506b
 
 
 
 
b07d55c
d87506b
 
 
b07d55c
 
 
d87506b
b07d55c
d87506b
 
b07d55c
 
d87506b
 
 
b07d55c
 
d87506b
 
 
b07d55c
 
d87506b
 
b07d55c
 
d87506b
b07d55c
 
 
d87506b
 
b07d55c
 
 
 
 
 
 
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!-- static/index.html  – AnyCoder AI (dark theme) -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>AnyCoder AI Code Generator</title>
  <meta name="description"
        content="Generate, modify & understand code with the most advanced AI models." />
  <link rel="stylesheet" href="file=/static/style.css" />
</head>
<body>
  <header>
    <h1>🚀 AnyCoder AI</h1>
    <p>Your AI partner for generating, modifying &amp; understanding code.</p>
  </header>

  <main>
    <!-- 1 · MODEL -->
    <section aria-labelledby="m‑h">
      <h2 id="m‑h">1. Select Model</h2>
      <select id="model" aria-label="AI Model"></select>
    </section>

    <!-- 2 · CONTEXT -->
    <section aria-labelledby="c‑h">
      <h2 id="c‑h">2. Provide Context</h2>

      <div class="tabs" role="tablist">
        <button role="tab" id="t‑prompt"  aria-controls="p‑prompt"  aria-selected="true">Prompt</button>
        <button role="tab" id="t‑file"    aria-controls="p‑file"    aria-selected="false">File</button>
        <button role="tab" id="t‑web"     aria-controls="p‑web"     aria-selected="false">Website</button>
      </div>

      <div role="tabpanel" id="p‑prompt">
        <textarea id="prompt" placeholder="Describe what you want to build…"></textarea>
      </div>

      <div role="tabpanel" id="p‑file" hidden>
        <label for="file">Reference file</label>
        <input id="file" type="file" accept=".pdf,.docx,.txt" />
      </div>

      <div role="tabpanel" id="p‑web" hidden>
        <label for="url">Website URL</label>
        <input id="url" type="url" placeholder="https://example.com" />
      </div>
    </section>

    <!-- 3 · OUTPUT -->
    <section aria-labelledby="o‑h">
      <h2 id="o‑h">3. Configure Output</h2>
      <label for="lang">Target language</label>
      <select id="lang"></select>

      <div class="search">
        <input id="search" type="checkbox" />
        <label for="search">Enable web search</label>
      </div>
    </section>

    <!-- ACTIONS -->
    <section class="actions">
      <button id="clear">Clear session</button>
      <button id="gen">Generate code</button>
    </section>

    <!-- OUTPUT PANES -->
    <section aria-labelledby="out‑h">
      <h2 id="out‑h" class="visually‑hidden">Output</h2>

      <div class="tabs" role="tablist">
        <button role="tab" id="t‑code"    aria-controls="p‑code"    aria-selected="true">Code</button>
        <button role="tab" id="t‑preview" aria-controls="p‑preview" aria-selected="false">Preview</button>
        <button role="tab" id="t‑hist"    aria-controls="p‑hist"    aria-selected="false">History</button>
      </div>

      <div role="tabpanel" id="p‑code">
        <pre><code id="code"></code></pre>
      </div>

      <div role="tabpanel" id="p‑preview" hidden>
        <iframe id="preview" sandbox="allow-scripts allow-same-origin"></iframe>
      </div>

      <div role="tabpanel" id="p‑hist" hidden>
        <ul id="hist" aria-live="polite"></ul>
      </div>
    </section>
  </main>

  <script type="module" src="file=/static/index.js"></script>
</body>
</html>