Hugging Face's logo

Spaces:
mlc-ai
/
WebLLM-Structured-Generation-Playground
Running

App Files Community
neetnestor commited on
Commit
b8cb406
·
1 Parent(s): d6f1f58

Split to 2 columns in large screens

Browse files
Files changed (2) hide show
  1. index.html +50 -41
  2. style/style.css +21 -3
index.html CHANGED
@@ -13,49 +13,58 @@
13
  <link rel="stylesheet" href="./style/hljs.css" />
14
  </head>
15
  <body>
 
 
 
 
 
 
 
 
 
 
16
  <main>
17
- <h1>WebLLM JSON Playground</h1>
18
- <h4>
19
- Generate JSON output from LLMs using
20
- <a
21
- referrerpolicy="no-referrer"
22
- href="https://github.com/mlc-ai/web-llm"
23
- target="_blank"
24
- >WebLLM</a
25
- >.
26
- </h4>
27
- <div class="card">
28
- <form>
29
- <label for="model-selection" class="container"
30
- ><span>Model</span>
31
- <select id="model-selection"></select
32
- ></label>
33
- </form>
 
 
 
 
 
 
 
 
 
 
 
 
 
34
  </div>
35
- <div class="card">
36
- <form>
37
- <label for="prompt" class="container"
38
- ><span>Prompt</span>
39
- <textarea id="prompt" dir="ltr" placeholder="" rows="1"></textarea>
40
- </label>
41
- </form>
42
- </div>
43
- <div class="card">
44
- <form>
45
- <label class="container"
46
- ><span>Schema</span>
47
- <div id="schema"></div>
48
- </label>
49
- </form>
50
- </div>
51
- <button id="generate">Generate</button>
52
- <div class="card">
53
- <form>
54
- <label class="output"
55
- ><span>Output</span>
56
- <div id="output"></div>
57
- </label>
58
- </form>
59
  </div>
60
  </main>
61
  <script
 
13
  <link rel="stylesheet" href="./style/hljs.css" />
14
  </head>
15
  <body>
16
+ <h1>WebLLM JSON Playground</h1>
17
+ <h4>
18
+ Generate JSON output from LLMs using
19
+ <a
20
+ referrerpolicy="no-referrer"
21
+ href="https://github.com/mlc-ai/web-llm"
22
+ target="_blank"
23
+ >WebLLM</a
24
+ >.
25
+ </h4>
26
  <main>
27
+ <div id="left-col" class="container">
28
+ <div class="card">
29
+ <form>
30
+ <label for="model-selection" class="container"
31
+ ><span>Model</span>
32
+ <select id="model-selection"></select
33
+ ></label>
34
+ </form>
35
+ </div>
36
+ <div class="card">
37
+ <form>
38
+ <label for="prompt" class="container"
39
+ ><span>Prompt</span>
40
+ <textarea
41
+ id="prompt"
42
+ dir="ltr"
43
+ placeholder=""
44
+ rows="1"
45
+ ></textarea>
46
+ </label>
47
+ </form>
48
+ </div>
49
+ <div class="card">
50
+ <form>
51
+ <label class="container"
52
+ ><span>Schema</span>
53
+ <div id="schema"></div>
54
+ </label>
55
+ </form>
56
+ </div>
57
  </div>
58
+ <div id="right-col" class="container">
59
+ <button id="generate">Generate</button>
60
+ <div class="card">
61
+ <form>
62
+ <label class="output"
63
+ ><span>Output</span>
64
+ <div id="output"></div>
65
+ </label>
66
+ </form>
67
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
68
  </div>
69
  </main>
70
  <script
style/style.css CHANGED
@@ -12,6 +12,7 @@ body {
12
  }
13
 
14
  main {
 
15
  display: flex;
16
  flex-grow: 1;
17
  flex-direction: column;
@@ -19,6 +20,8 @@ main {
19
  align-items: center;
20
  min-width: min(0, 100%);
21
  position: relative;
 
 
22
  }
23
 
24
  h1,
@@ -48,7 +51,6 @@ p {
48
  }
49
 
50
  .card {
51
- max-width: 620px;
52
  padding: 1rem;
53
  border: 1px solid #e5e7eb;
54
  border-radius: 0.5rem;
@@ -58,7 +60,6 @@ p {
58
  flex-direction: inherit;
59
  flex-wrap: wrap;
60
  padding: 10px 12px;
61
- width: 100%;
62
  }
63
 
64
  .card p:last-child {
@@ -72,8 +73,11 @@ form {
72
  }
73
 
74
  .container {
75
- display: block;
 
76
  width: 100%;
 
 
77
  }
78
 
79
  form span {
@@ -158,4 +162,18 @@ button:hover {
158
  background: linear-gradient(to bottom right, #ffedd5, #fed7aa);
159
  color: #ea580c;
160
  cursor: pointer;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
161
  }
 
12
  }
13
 
14
  main {
15
+ width: 100%;
16
  display: flex;
17
  flex-grow: 1;
18
  flex-direction: column;
 
20
  align-items: center;
21
  min-width: min(0, 100%);
22
  position: relative;
23
+ margin: auto;
24
+ padding: 2rem;
25
  }
26
 
27
  h1,
 
51
  }
52
 
53
  .card {
 
54
  padding: 1rem;
55
  border: 1px solid #e5e7eb;
56
  border-radius: 0.5rem;
 
60
  flex-direction: inherit;
61
  flex-wrap: wrap;
62
  padding: 10px 12px;
 
63
  }
64
 
65
  .card p:last-child {
 
73
  }
74
 
75
  .container {
76
+ display: flex;
77
+ flex-direction: column;
78
  width: 100%;
79
+ max-width: 620px;
80
+ gap: 1.5rem;
81
  }
82
 
83
  form span {
 
162
  background: linear-gradient(to bottom right, #ffedd5, #fed7aa);
163
  color: #ea580c;
164
  cursor: pointer;
165
+ }
166
+
167
+ @media (min-width: 1600px) {
168
+ main {
169
+ display: flex;
170
+ flex-direction: row;
171
+ justify-content: space-evenly;
172
+ align-items: start;
173
+ max-width: 1600px;
174
+ }
175
+
176
+ #right-col {
177
+ flex-direction: column-reverse;
178
+ }
179
  }