Hugging Face's logo

Spaces:
parrotmaker
/
ai-canvas
Running

App Files Community
ai-canvas
File size: 3,227 Bytes 
d2f78a1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ca90ec6
 
 
 
 
 
 
 
 
d2f78a1
 
 
 
 
ca90ec6
d2f78a1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ca90ec6
d2f78a1
 
ca90ec6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d2f78a1
ca90ec6
 
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Web Playground</title>
  <style>
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      font-family: system-ui, sans-serif;
      display: flex;
      height: 100vh;
      background: #f5f5f5;
    }
    .sidebar {
      width: 300px;
      background: #ddd;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 1rem;
      border-radius: 0 0 0 30px;
    }
    .sidebar input {
      border: none;
      padding: 0.75rem 1rem;
      border-radius: 30px;
      margin-top: auto;
      outline: none;
    }
    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
      border-radius: 0 0 30px 0;
    }
    .tab-bar {
      display: flex;
      align-items: center;
      padding: 0.5rem 1rem;
      gap: 0.5rem;
      background: #ccc;
      border-radius: 0 0 0 30px;
    }
    .tab-bar .tab {
      background: white;
      border-radius: 30px;
      padding: 0.4rem 1rem;
      cursor: pointer;
      border: none;
    }
    .tab-bar .actions {
      margin-left: auto;
      display: flex;
      gap: 1rem;
    }
    .tab-bar .actions button {
      background: none;
      border: none;
      font-weight: bold;
      cursor: pointer;
    }
    .editor {
      flex: 1;
      background: #eee;
      padding: 1rem;
    }
    textarea {
      width: 100%;
      height: 100%;
      border: none;
      outline: none;
      background: transparent;
      font-family: monospace;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <!-- Left: Assistant -->
  <div class="sidebar">
    <input id="prompt" type="text" placeholder="Write what you want ✨" />
  </div>

  <!-- Right: Editor UI -->
  <div class="main">
    <div class="tab-bar">
      <button class="tab">index.html</button>
      <button class="tab">styles.css</button>
      <button class="tab">script.js</button>
      <button class="tab">+</button>
      <div class="actions">
        <button>▶️ Run</button>
        <button>Download</button>
      </div>
    </div>
    <div class="editor">
      <textarea id="editor" placeholder="Your code..."></textarea>
    </div>
  </div>

  <script>
    const promptInput = document.getElementById("prompt");
    const editor = document.getElementById("editor");

    promptInput.addEventListener("keydown", async (e) => {
      if (e.key === "Enter") {
        e.preventDefault();
        const prompt = promptInput.value.trim();
        if (!prompt) return;

        promptInput.disabled = true;
        promptInput.value = "Thinking...";

        const response = await fetch("/generate", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ data: [prompt] })
        });

        const json = await response.json();
        const aiText = json.data[0];

        // Append AI response to editor
        editor.value += "\\n\\n// AI Suggestion:\\n" + aiText;
        promptInput.value = "";
        promptInput.disabled = false;
        promptInput.focus();
      }
    });
  </script>
</body>
</html>