Update app.py

app.py

@@ -1,100 +1,99 @@
 import gradio as gr
 
 def display_html(html_code):
-    """
-    入力されたHTMLコードをgr.HTMLコンポーネントに表示する関数。
-    """
     return f"""
         <div style='overflow-x: hidden; height: 80vh; width:100%;'>
             {html_code}
         </div>
     """
 
-# カスタムテーマ (Gradio 5.x 系対応, link関連を削除)
+# カスタムテーマ (フォント、テキストスタイルを大幅改良)
 theme = gr.themes.Default(
     primary_hue=gr.themes.colors.indigo,
     secondary_hue=gr.themes.colors.blue,
     neutral_hue=gr.themes.colors.gray,
-    font=[gr.themes.GoogleFont('Inter'), 'ui-sans-serif', 'system-ui', 'sans-serif'],
+    font=[gr.themes.GoogleFont('Roboto Serif'), 'ui-serif', 'serif'],  # フォント変更
 ).set(
-    # 全体的なスタイルの微調整
     body_background_fill="linear-gradient(to bottom right, #f5f5f5, #e0e7ff)",
     body_text_color="rgba(0, 0, 0, 0.8)",
     body_text_size="md",
     body_text_color_subdued="rgba(0, 0, 0, 0.6)",
 
-    # ブロック要素のスタイル
     block_background_fill="white",
     block_border_color="rgba(0, 0, 0, 0.1)",
     block_border_width="1px",
-    # block_border_radius="*radius_lg",  # Gradio 5 でエラーが出る場合はコメントアウト
     block_title_text_weight="600",
     block_label_background_fill="rgba(0, 0, 0, 0.04)",
     block_label_text_color="primary",
     block_label_text_size="sm",
     block_label_margin="0.5rem",
+    block_padding="2rem", #ブロック内のパディングを増やす
 
-
-    # ボタンのスタイル
     button_primary_background_fill="primary",
     button_primary_background_fill_hover="dark",
     button_primary_text_color="white",
-    # button_primary_border_radius="*radius_lg", # Gradio 5 でエラーが出る場合はコメントアウト
     button_secondary_background_fill="white",
     button_secondary_border_color="primary",
     button_secondary_text_color="primary",
-    # 影
-    # button_shadow="*shadow_drop_lg", #Gradio5でエラーがでたらコメントアウト
-    # button_shadow_hover="*shadow_drop_lg",#Gradio5でエラーがでたらコメントアウト
 
-    # テキストボックス
     input_background_fill="#f9fafb",
     input_border_color="rgba(0, 0, 0, 0.2)",
     input_border_width="1px",
     input_text_size="md",
     input_placeholder_color="rgba(0, 0, 0, 0.4)",
 
-    # その他
     background_fill_secondary="white",
     border_color_accent="primary",
     border_color_primary="rgba(0, 0, 0, 0.2)",
-
-    # link_* 関連の設定は削除。CSSで対応
 )
 
-# カスタム CSS (リンクのスタイル)
+# カスタム CSS (見出し、本文、ラベルのスタイル)
 css = """
+/* 見出し (h1) */
+#component-0 h1 { /* markdownコンポーネントは、自動でIDがつく*/
+    font-size: 2.5rem;  /* 大きめのフォントサイズ */
+    font-weight: 700;   /* 太字 */
+    color: #312e81;     /* 濃いインディゴ */
+    margin-bottom: 1rem; /* 下部の余白 */
+    text-align: center;  /* 中央揃え */
+}
+
+/* 本文 (Markdown コンポーネント内の p タグ) */
+#component-0 p{
+    font-size: 1.1rem;    /* 適切なフォントサイズ */
+    line-height: 1.6;    /* 行間を広げる */
+    color: #4b5563;    /* 落ち着いたグレー */
+    margin-bottom: 1rem; /* 段落間の余白 */
+}
+
+/* ラベル */
+.gr-block label span {
+    font-weight: 500;   /* 少し太字に */
+    color: #4b5563;    /* 落ち着いたグレー */
+}
+
+/* リンクのスタイル(必要なら) */
 a {
     color: var(--link-text-color);
-    text-decoration: underline; /* または none など */
+    text-decoration: underline;
 }
 a:hover {
     color: var(--link-hover-color);
 }
-a:visited {
-    color: var(--link-visited-color);
-}
-
-/* 必要に応じて、さらに詳細なスタイルをCSSで追加 */
 """
 
 
-with gr.Blocks(theme=theme, title="HTML Viewer", css=css) as demo:  # css引数を追加
+with gr.Blocks(theme=theme, title="HTML Viewer", css=css) as demo:
     gr.Markdown(
     """
     # HTML Viewer
 
-    入力されたHTMLコードを、プレビュー表示します。
-
-    * 横スクロール禁止、縦スクロール許可
-    * レスポンシブデザイン (Gradio デフォルト)
-    * スマホでの表示は、PC版を縮小したようなイメージ
-    * インターコンチネンタル石垣島のクラブラウンジ風の、白く爽やかな外観(インディゴブルーでスタイリッシュに)
-    """)
+    入力されたHTMLコードをプレビュー表示します。
+    """)  # 説明を簡潔に
     with gr.Row():
         with gr.Column(scale=1):
             input_textbox = gr.Textbox(
-                label="HTMLコードを入力",
+                label="HTMLコード",  # ラベルもシンプルに
                 placeholder="ここにHTMLコードを貼り付けてください...",
                 lines=10
                 )
@@ -125,6 +124,5 @@ with gr.Blocks(theme=theme, title="HTML Viewer", css=css) as demo:  # css引数
         inputs = input_textbox
     )
 
-
 if __name__ == "__main__":
     demo.launch()