Update app.py
Browse files
app.py
CHANGED
@@ -245,7 +245,7 @@ css = """
|
|
245 |
flex: 1;
|
246 |
padding: 20px;
|
247 |
border-right: 2px solid #eee;
|
248 |
-
max-width:
|
249 |
}
|
250 |
|
251 |
.examples-column {
|
@@ -278,6 +278,16 @@ css = """
|
|
278 |
border-radius: 10px;
|
279 |
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
280 |
margin-bottom: 20px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
281 |
}
|
282 |
|
283 |
.example-card {
|
@@ -293,8 +303,25 @@ css = """
|
|
293 |
color: #2a2a2a;
|
294 |
margin-bottom: 10px;
|
295 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
296 |
"""
|
297 |
|
|
|
298 |
# Gradio ์ธํฐํ์ด์ค ์์
|
299 |
with gr.Blocks(css=css) as demo:
|
300 |
gr.Markdown(
|
@@ -306,16 +333,20 @@ with gr.Blocks(css=css) as demo:
|
|
306 |
gr.HTML("""<a href="https://visitorbadge.io/status?path=https%3A%2F%2Faiqcamp-diagram.hf.space">
|
307 |
<img src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Faiqcamp-diagram.hf.space&countColor=%23263759" />
|
308 |
</a>""")
|
|
|
|
|
309 |
|
310 |
with gr.Row(equal_height=True) as main_row:
|
311 |
# ์ผ์ชฝ ์
๋ ฅ ์ปฌ๋ผ
|
312 |
-
with gr.Column(elem_id="input-column", scale=
|
313 |
with gr.Group(elem_classes="input-box"):
|
314 |
prompt = gr.Text(
|
315 |
label="Diagram Prompt",
|
316 |
placeholder="Enter your diagram structure...",
|
317 |
-
lines=
|
|
|
318 |
)
|
|
|
319 |
run_button = gr.Button("Generate Diagram", variant="primary")
|
320 |
result = gr.Image(label="Generated Diagram")
|
321 |
|
|
|
245 |
flex: 1;
|
246 |
padding: 20px;
|
247 |
border-right: 2px solid #eee;
|
248 |
+
max-width: 800px; /* ์ฆ๊ฐ๋ ์ต๋ ๋๋น */
|
249 |
}
|
250 |
|
251 |
.examples-column {
|
|
|
278 |
border-radius: 10px;
|
279 |
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
280 |
margin-bottom: 20px;
|
281 |
+
width: 100%; /* ์ ์ฒด ๋๋น ์ฌ์ฉ */
|
282 |
+
}
|
283 |
+
|
284 |
+
/* ํ
์คํธ ์
๋ ฅ ๋ฐ์ค ์คํ์ผ */
|
285 |
+
.input-box textarea {
|
286 |
+
width: 100% !important; /* ๊ฐ์ ๋๋น 100% */
|
287 |
+
min-width: 600px !important; /* ์ต์ ๋๋น ์ค์ */
|
288 |
+
font-size: 14px !important;
|
289 |
+
line-height: 1.5 !important;
|
290 |
+
padding: 12px !important;
|
291 |
}
|
292 |
|
293 |
.example-card {
|
|
|
303 |
color: #2a2a2a;
|
304 |
margin-bottom: 10px;
|
305 |
}
|
306 |
+
|
307 |
+
/* ๋ ์ด์์ ์กฐ์ */
|
308 |
+
.contain {
|
309 |
+
max-width: 1400px !important; /* ์ ์ฒด ์ปจํ
์ด๋ ๋๋น ์ฆ๊ฐ */
|
310 |
+
margin: 0 auto !important;
|
311 |
+
}
|
312 |
+
|
313 |
+
/* ์
๋ ฅ ์์ญ ์กฐ์ */
|
314 |
+
.input-area {
|
315 |
+
flex: 2 !important; /* ์
๋ ฅ ์์ญ ๋น์จ ์ฆ๊ฐ */
|
316 |
+
}
|
317 |
+
|
318 |
+
/* ์์ ์์ญ ์กฐ์ */
|
319 |
+
.examples-area {
|
320 |
+
flex: 1 !important;
|
321 |
+
}
|
322 |
"""
|
323 |
|
324 |
+
|
325 |
# Gradio ์ธํฐํ์ด์ค ์์
|
326 |
with gr.Blocks(css=css) as demo:
|
327 |
gr.Markdown(
|
|
|
333 |
gr.HTML("""<a href="https://visitorbadge.io/status?path=https%3A%2F%2Faiqcamp-diagram.hf.space">
|
334 |
<img src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Faiqcamp-diagram.hf.space&countColor=%23263759" />
|
335 |
</a>""")
|
336 |
+
|
337 |
+
|
338 |
|
339 |
with gr.Row(equal_height=True) as main_row:
|
340 |
# ์ผ์ชฝ ์
๋ ฅ ์ปฌ๋ผ
|
341 |
+
with gr.Column(elem_id="input-column", scale=2): # scale ๊ฐ ์ฆ๊ฐ
|
342 |
with gr.Group(elem_classes="input-box"):
|
343 |
prompt = gr.Text(
|
344 |
label="Diagram Prompt",
|
345 |
placeholder="Enter your diagram structure...",
|
346 |
+
lines=10, # ์ค ์ ์ฆ๊ฐ
|
347 |
+
elem_classes="prompt-input" # CSS ํด๋์ค ์ถ๊ฐ
|
348 |
)
|
349 |
+
|
350 |
run_button = gr.Button("Generate Diagram", variant="primary")
|
351 |
result = gr.Image(label="Generated Diagram")
|
352 |
|