Create app.py

app.py

@@ -0,0 +1,63 @@
+import gradio as gr
+
+custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
+
+body {
+    font-family: 'Playfair Display', serif;
+    background: linear-gradient(135deg, #5D4037, #3E2723);
+    color: #f7f1e1;
+    margin: 0;
+    padding: 0;
+}
+
+/* コンテナの最大幅と中央寄せ */
+.gradio-container {
+    max-width: 800px;
+    margin: auto;
+    padding: 20px;
+}
+
+/* 見出し */
+h1 {
+    text-align: center;
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    color: #d4af37;
+}
+
+/* ボタンのスタイル */
+.gr-button {
+    background-color: #6f4e37;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    font-size: 1rem;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+/* テキストボックスとHTML表示領域のスタイル */
+.gr-textbox, .gr-html {
+    background-color: #ffffff;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+"""
+
+def render_html(html_code):
+    # 入力された HTML コードをそのまま返す（gr.HTML がレンダリングします）
+    return html_code
+
+with gr.Blocks(css=custom_css, title="Club Lounge HTML Renderer") as demo:
+    gr.Markdown("# Club Lounge HTML Renderer")
+    gr.Markdown("下のテキストボックスに HTML コードを入力すると、右側にレンダリング結果が表示されます。")
+    with gr.Row():
+        with gr.Column():
+            html_input = gr.Textbox(label="HTMLコードを入力してください", lines=10, placeholder="<h1>Hello, Club Lounge!</h1>")
+            render_btn = gr.Button("レンダリング")
+        with gr.Column():
+            html_display = gr.HTML(label="レンダリング結果")
+    render_btn.click(fn=render_html, inputs=html_input, outputs=html_display)
+
+demo.launch()