Hugging Face's logo

Spaces:
artificialguybr
/
CanIRunThisLLM
Running

App Files Community
artificialguybr commited on
Commit
394db7a
·
1 Parent(s): 964db32

Fix skeleton to match result layout structure, balance column widths

Browse files
Files changed (1) hide show
  1. app.py +50 -11
app.py CHANGED
@@ -1204,7 +1204,7 @@ with gr.Blocks(title="Can I Run This LLM?", css=CSS, theme=gr.themes.Default())
1204
  # TWO COLUMN LAYOUT - inputs left, results skeleton right
1205
  with gr.Row():
1206
  # LEFT: Inputs
1207
- with gr.Column(scale=1, min_width=380):
1208
  # Mode selector - Dropdown is more visible
1209
  mode = gr.Dropdown(
1210
  label="Mode",
@@ -1286,19 +1286,58 @@ with gr.Blocks(title="Can I Run This LLM?", css=CSS, theme=gr.themes.Default())
1286
  calc_btn = gr.Button("CHECK", variant="primary", size="lg")
1287
 
1288
  # RIGHT: Results skeleton (always visible, fills in)
1289
- with gr.Column(scale=2, min_width=600):
1290
  result_html = gr.HTML("""
1291
- <div style="border:2px solid var(--border);border-radius:12px;overflow:hidden">
1292
- <div style="background:var(--bg-warm);padding:20px;border-bottom:2px solid var(--border)">
1293
- <div style="color:var(--text-muted);font-size:14px;text-align:center">← Enter model and click CHECK</div>
 
 
 
 
1294
  </div>
1295
- <div style="padding:24px;background:var(--bg-card)">
1296
- <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
1297
- <div style="background:var(--bg-secondary);border-radius:8px;height:80px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:13px">Model info</div>
1298
- <div style="background:var(--bg-secondary);border-radius:8px;height:80px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:13px">Result</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1299
  </div>
1300
- <div style="background:var(--bg-secondary);border-radius:8px;height:60px;margin-top:16px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:13px">VRAM breakdown</div>
1301
- <div style="background:var(--bg-secondary);border-radius:8px;height:50px;margin-top:16px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:13px">Apple Silicon speed</div>
1302
  </div>
1303
  </div>
1304
  """)
 
1204
  # TWO COLUMN LAYOUT - inputs left, results skeleton right
1205
  with gr.Row():
1206
  # LEFT: Inputs
1207
+ with gr.Column(scale=1, min_width=320):
1208
  # Mode selector - Dropdown is more visible
1209
  mode = gr.Dropdown(
1210
  label="Mode",
 
1286
  calc_btn = gr.Button("CHECK", variant="primary", size="lg")
1287
 
1288
  # RIGHT: Results skeleton (always visible, fills in)
1289
+ with gr.Column(scale=1.3, min_width=500):
1290
  result_html = gr.HTML("""
1291
+ <div style="border:2px solid var(--border);border-radius:12px;overflow:hidden;background:var(--bg-card)">
1292
+ <!-- Model info bar skeleton -->
1293
+ <div style="background:var(--bg-secondary);border-radius:10px;padding:16px 20px;margin:20px;display:flex;align-items:center;gap:24px">
1294
+ <div style="flex:1"><div style="font-size:12px;color:var(--text-muted);margin-bottom:4px">Model</div><div style="height:20px;background:var(--bg-card);border-radius:4px;width:80%"></div></div>
1295
+ <div style="flex:1"><div style="font-size:12px;color:var(--text-muted);margin-bottom:4px">Parameters</div><div style="height:20px;background:var(--bg-card);border-radius:4px;width:60%"></div></div>
1296
+ <div style="flex:1"><div style="font-size:12px;color:var(--text-muted);margin-bottom:4px">Quantization</div><div style="height:20px;background:var(--bg-card);border-radius:4px;width:70%"></div></div>
1297
+ <div style="flex:1"><div style="font-size:12px;color:var(--text-muted);margin-bottom:4px">Context</div><div style="height:20px;background:var(--bg-card);border-radius:4px;width:50%"></div></div>
1298
  </div>
1299
+ <!-- YES/NO header skeleton -->
1300
+ <div style="background:var(--bg-secondary);padding:24px;border-bottom:2px solid var(--border)">
1301
+ <div style="display:flex;align-items:center;gap:24px">
1302
+ <div style="width:80px;height:48px;background:var(--bg-card);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-muted)">?</div>
1303
+ <div style="flex:1"><div style="height:18px;background:var(--bg-card);border-radius:4px;width:60%;margin-bottom:8px"></div><div style="height:22px;background:var(--bg-card);border-radius:4px;width:45%"></div></div>
1304
+ </div>
1305
+ </div>
1306
+ <!-- VRAM breakdown skeleton (4-card grid) -->
1307
+ <div style="padding:24px">
1308
+ <div style="font-size:14px;font-weight:600;color:var(--text-muted);margin-bottom:16px">VRAM Breakdown</div>
1309
+ <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
1310
+ <div style="background:var(--bg-secondary);padding:16px;border-radius:8px;border-left:3px solid var(--border)">
1311
+ <div style="height:13px;background:var(--bg-card);border-radius:4px;width:40%;margin-bottom:4px"></div>
1312
+ <div style="height:20px;background:var(--bg-card);border-radius:4px;width:30%;margin-top:4px"></div>
1313
+ </div>
1314
+ <div style="background:var(--bg-secondary);padding:16px;border-radius:8px;border-left:3px solid var(--border)">
1315
+ <div style="height:13px;background:var(--bg-card);border-radius:4px;width:40%;margin-bottom:4px"></div>
1316
+ <div style="height:20px;background:var(--bg-card);border-radius:4px;width:30%;margin-top:4px"></div>
1317
+ </div>
1318
+ <div style="background:var(--bg-secondary);padding:16px;border-radius:8px;border-left:3px solid var(--border)">
1319
+ <div style="height:13px;background:var(--bg-card);border-radius:4px;width:40%;margin-bottom:4px"></div>
1320
+ <div style="height:20px;background:var(--bg-card);border-radius:4px;width:30%;margin-top:4px"></div>
1321
+ </div>
1322
+ <div style="background:var(--bg-secondary);padding:16px;border-radius:8px;border-left:3px solid var(--border)">
1323
+ <div style="height:13px;background:var(--bg-card);border-radius:4px;width:40%;margin-bottom:4px"></div>
1324
+ <div style="height:20px;background:var(--bg-card);border-radius:4px;width:30%;margin-top:4px"></div>
1325
+ </div>
1326
+ </div>
1327
+ </div>
1328
+ <!-- Formula skeleton -->
1329
+ <div style="padding:0 24px 24px 24px">
1330
+ <div style="background:var(--bg-secondary);border-radius:8px;padding:16px;border:1px solid var(--border)">
1331
+ <div style="font-size:12px;font-weight:600;color:var(--text-muted);margin-bottom:8px">How it's calculated</div>
1332
+ <div style="height:60px;background:var(--bg-card);border-radius:4px"></div>
1333
+ </div>
1334
+ </div>
1335
+ <!-- Apple Silicon skeleton -->
1336
+ <div style="padding:0 24px 24px 24px">
1337
+ <div style="background:var(--bg-secondary);border-radius:8px;padding:12px;border:1px solid var(--border)">
1338
+ <div style="height:12px;background:var(--bg-card);border-radius:4px;width:30%;margin-bottom:8px"></div>
1339
+ <div style="height:18px;background:var(--bg-card);border-radius:4px;width:25%"></div>
1340
  </div>
 
 
1341
  </div>
1342
  </div>
1343
  """)