Update app.py

app.py

@@ -10,59 +10,59 @@ def display_html(html_code):
         </div>
     """
 
-# カスタムテーマ (大幅改良)
+# カスタムテーマ (Gradio 5.x 系対応)
 theme = gr.themes.Default(
-    primary_hue=gr.themes.colors.indigo,  # メインカラーを洗練されたインディゴに
+    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('Inter'), 'ui-sans-serif', 'system-ui', 'sans-serif'],
 ).set(
     # 全体的なスタイルの微調整
-    body_background_fill="linear-gradient(to bottom right, #f5f5f5, #e0e7ff)",  # 美しいグラデーション背景
-    body_text_color="rgba(0, 0, 0, 0.8)",  # ほんのり透明感のある黒
-    body_text_size="*text_md",
+    body_background_fill="linear-gradient(to bottom right, #f5f5f5, #e0e7ff)",
+    body_text_color="rgba(0, 0, 0, 0.8)",
+    body_text_size="md",  # text_md -> 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_color="rgba(0, 0, 0, 0.1)",
     block_border_width="1px",
-    block_border_radius="*radius_lg", # 大きめの角丸
+    # 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_500", #ラベルの色
-    block_label_text_size="*text_sm",
+    block_label_background_fill="rgba(0, 0, 0, 0.04)",
+    block_label_text_color="primary", # primary_500 -> primary
+    block_label_text_size="sm", # text_sm -> sm
     block_label_margin="0.5rem",
 
+
     # ボタンのスタイル
-    button_primary_background_fill="*primary_500", #ボタンの背景色
-    button_primary_background_fill_hover="*primary_600",
+    button_primary_background_fill="primary", # primary_500 -> primary
+    button_primary_background_fill_hover="dark", # primary_600 -> dark
     button_primary_text_color="white",
-    button_primary_border_radius="*radius_lg",
+    # button_primary_border_radius="*radius_lg", # Gradio 5 でエラーが出る場合はコメントアウト
     button_secondary_background_fill="white",
-    button_secondary_border_color="*primary_500",
-    button_secondary_text_color="*primary_500",
-     # 影
-    button_shadow="*shadow_drop_lg",
-    button_shadow_hover="*shadow_drop_lg",
+    button_secondary_border_color="primary", # primary_500 -> primary
+    button_secondary_text_color="primary", # primary_500 -> 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="*text_md",
+    input_text_size="md",  # text_md -> md
     input_placeholder_color="rgba(0, 0, 0, 0.4)",
 
     # その他
-    background_fill_secondary="white", #背景色
-    border_color_accent="*primary_500",
+    background_fill_secondary="white",
+    border_color_accent="primary", # primary_500 -> primary
     border_color_primary="rgba(0, 0, 0, 0.2)",
 
-    #リンクの色
-    link_text_color = "*secondary_500",
-    link_hover_color = "*secondary_600",
-    link_visited_color = "*secondary_700",
-
+     #リンクの色
+    link_text_color = "secondary", # secondary_500 -> secondary
+    link_hover_color = "dark", # secondary_600 -> dark
+    link_visited_color = "darker", # secondary_700 -> darker
 
 )
 
@@ -75,6 +75,10 @@ with gr.Blocks(theme=theme, title="HTML Viewer") as demo:
 
     入力されたHTMLコードを、プレビュー表示します。
 
+    * 横スクロール禁止、縦スクロール許可
+    * レスポンシブデザイン (Gradio デフォルト)
+    * スマホでの表示は、PC版を縮小したようなイメージ
+    * インターコンチネンタル石垣島のクラブラウンジ風の、白く爽やかな外観(インディゴブルーでスタイリッシュに)
     """)
     with gr.Row():
         with gr.Column(scale=1):
@@ -83,7 +87,7 @@ with gr.Blocks(theme=theme, title="HTML Viewer") as demo:
                 placeholder="ここにHTMLコードを貼り付けてください...",
                 lines=10
                 )
-            submit_button = gr.Button("表示", variant="primary")  # プライマリボタンに
+            submit_button = gr.Button("表示", variant="primary")
         with gr.Column(scale=3):
             output_html = gr.HTML(label="プレビュー",)