Update app.py

app.py

@@ -1,64 +1,620 @@
 import gradio as gr
-from huggingface_hub import InferenceClient
+import time
+import pandas as pd
 
-"""
-For more information on `huggingface_hub` Inference API support, please check the docs: https://huggingface.co/docs/huggingface_hub/v0.22.2/en/guides/inference
-"""
-client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
-
-
-def respond(
-    message,
-    history: list[tuple[str, str]],
-    system_message,
-    max_tokens,
-    temperature,
-    top_p,
-):
-    messages = [{"role": "system", "content": system_message}]
-
-    for val in history:
-        if val[0]:
-            messages.append({"role": "user", "content": val[0]})
-        if val[1]:
-            messages.append({"role": "assistant", "content": val[1]})
-
-    messages.append({"role": "user", "content": message})
-
-    response = ""
-
-    for message in client.chat_completion(
-        messages,
-        max_tokens=max_tokens,
-        stream=True,
-        temperature=temperature,
-        top_p=top_p,
-    ):
-        token = message.choices[0].delta.content
-
-        response += token
-        yield response
-
-
-"""
-For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
-"""
-demo = gr.ChatInterface(
-    respond,
-    additional_inputs=[
-        gr.Textbox(value="You are a friendly Chatbot.", label="System message"),
-        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
-        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
-        gr.Slider(
-            minimum=0.1,
-            maximum=1.0,
-            value=0.95,
-            step=0.05,
-            label="Top-p (nucleus sampling)",
-        ),
-    ],
-)
+# 和水（WA-SUI）テーマの作成
+def create_wa_sui_theme():
+    return gr.Theme(
+        primary_hue="blue",
+        secondary_hue="cyan", 
+        neutral_hue="slate",
+        text_size="md",
+        spacing_size="lg",
+        radius_size="sm",
+        font=[
+            "Hiragino Sans", 
+            "Noto Sans JP",
+            "Yu Gothic",
+            "system-ui",
+            "sans-serif"
+        ],
+        font_mono=[
+            "SF Mono",
+            "Monaco", 
+            "monospace"
+        ]
+    ).set(
+        # 和水カラーパレット
+        body_background_fill="#ffffff",      # 純白の背景
+        body_text_color="#025159",           # WA-from-above-4: 深海の静寂
+        button_primary_background_fill="#03658C",        # WA-from-above-2: 深い海
+        button_primary_background_fill_hover="#025159",  # WA-from-above-4: より深い海
+        button_primary_text_color="#ffffff",             # WA-from-above-1: 水面の輝き
+        button_secondary_background_fill="#03A6A6",      # WA-from-above-5: ティールの調和
+        button_secondary_background_fill_hover="#037F8C", # WA-from-above-3: 中間の深さ
+        button_secondary_text_color="#ffffff",           # WA-from-above-4: 深海
+        input_background_fill="#ffffff",                 # 純白
+        input_border_color="#03A6A6",                    # WA-from-above-5: ティール
+        input_border_color_focus="#03658C",              # WA-from-above-2: フォーカス時
+        block_background_fill="#ffffff",                 # 純白
+        block_border_color="#037F8C",                    # WA-from-above-3: 境界
+        panel_background_fill="#ffffff",                 # 純白
+        panel_border_color="#037F8C",                    # WA-from-above-3: パネル境界
+        slider_color="#03658C",                          # WA-from-above-2: スライダー
+        checkbox_label_text_color="#ffffff",             # チェックボックスの文字色を白に
+    )
 
+# 豊富なUIコンポーネントのデモ
+def create_comprehensive_demo():
+    theme = create_wa_sui_theme()
+    
+    # データ用のサンプル
+    sample_data = pd.DataFrame({
+        "商品名": ["碧海ラテ", "水面煎茶", "深海玄米茶", "潮風ほうじ茶"],
+        "価格": [450, 300, 280, 320],
+        "在庫": [15, 25, 8, 12],
+        "評価": [4.8, 4.5, 4.2, 4.6]
+    })
+    
+    # 関数定義
+    def greet(name, mood, age, subscribe, hobbies_selected, prefecture_selected, satisfaction_level):
+        if not name:
+            return "名前を入力してください。"
+        
+        age_msg = f"（{age}歳）" if age else ""
+        subscribe_msg = "ニュースレターの購読ありがとうございます！" if subscribe else ""
+        hobbies_msg = f"趣味: {', '.join(hobbies_selected)}" if hobbies_selected else "趣味: 未選択"
+        prefecture_msg = f"出身: {prefecture_selected}"
+        
+        # 満足度のNone値を処理
+        if satisfaction_level is None:
+            satisfaction_msg = "満足度: 未設定"
+        else:
+            satisfaction_msg = f"満足度: {int(satisfaction_level)}/10"
+        
+        greetings = {
+            "🌊 爽やか": f"{name}さん{age_msg}、今��は海のように爽やかですね！🌊",
+            "💧 静寂": f"こんにちは、{name}さん{age_msg}。水のように静かな一日ですね。",
+            "🏖️ 穏やか": f"{name}さん{age_msg}、穏やかな波のような心地よい日ですね。🏖️"
+        }
+        result = greetings.get(mood, f"こんにちは、{name}さん{age_msg}。")
+        result += f"\n{hobbies_msg}"
+        result += f"\n{prefecture_msg}"
+        result += f"\n{satisfaction_msg}"
+        if subscribe_msg:
+            result += f"\n{subscribe_msg}"
+        return result
+    
+    def generate_haiku(season, style):
+        haikus = {
+            ("🌊 海", "古典"): "青い海\n波音響きて\n心澄む",
+            ("🌊 海", "現代"): "海見つめ\nインスタ映えする\n青い空",
+            ("💧 雨", "古典"): "雨滴りて\n水面に広がる\n静寂かな", 
+            ("💧 雨", "現代"): "雨の日は\nカフェで海を\n眺めつつ",
+            ("🌙 月", "古典"): "月影が\n水面に映りて\n揺らめけり",
+            ("🌙 月", "現代"): "月夜には\n海カフェでまったり\nティータイム",
+            ("❄️ 雪", "古典"): "雪降りて\n海も静寂に\n包まれん",
+            ("❄️ 雪", "現代"): "雪景色\n海と空とが\n一つなり"
+        }
+        return haikus.get((season, style), "季語なし\n心に響きて\n句となりぬ")
+    
+    def process_data(data, filter_price):
+        if data is None:
+            return sample_data
+        
+        df = pd.DataFrame(data)
+        if filter_price:
+            df = df[df['価格'] >= filter_price]
+        return df
+    
+    def add_chat_message(message, history):
+        if message:
+            responses = [
+                "海のように深いご質問ですね！",
+                "波のようにゆったりと考えてみましょう。",
+                "なるほど、潮の満ち引きのように理解できます。",
+                "水面に映る月のように美しい発想ですね！",
+                "一緒に海風を感じながら考えてみましょう。"
+            ]
+            import random
+            response = random.choice(responses)
+            history.append([message, response])
+        return history, ""
+    
+    # クリア機能の修正
+    def clear_all_inputs():
+        return [
+            "",          # name_input
+            25,          # age_input  
+            "💧 静寂",    # mood_selector
+            False,       # subscribe_check
+            [],          # hobbies
+            "神奈川県",   # prefecture
+            8,           # satisfaction
+            "",          # hobbies_debug
+            "神奈川県, 満足度: 8",  # status_debug
+            "8 (type: int)",     # satisfaction_debug
+            ""           # result_output
+        ]
+    
+    # 趣味選択の変更を監視する関数
+    def update_hobbies_debug(selected_hobbies):
+        if selected_hobbies:
+            return ", ".join(selected_hobbies)
+        else:
+            return "未選択"
+    
+    # 都道府県と満足度の変更を監視する関数
+    def update_status_debug(prefecture_val, satisfaction_val):
+        if satisfaction_val is None:
+            return f"{prefecture_val}, 満足度: 未設定"
+        else:
+            return f"{prefecture_val}, 満足度: {int(satisfaction_val)}"
+    
+    # 満足度の変更を監視する関数（専用）
+    def update_satisfaction_debug(satisfaction_val):
+        if satisfaction_val is None:
+            return "None (未設定)"
+        else:
+            return f"{satisfaction_val} (type: {type(satisfaction_val).__name__})"
+    
+    with gr.Blocks(theme=theme, title="WA-SUI 和水") as demo:
+        
+        # ヘッダー
+        gr.HTML("""
+        <div style='text-align: center; margin-bottom: 2rem; padding: 2rem; background: linear-gradient(135deg, #03658C 0%, #AED3F2 100%); color: white; border-radius: 12px; box-shadow: 0 8px 32px rgba(3, 101, 140, 0.3);'>
+            <h1 style='font-size: 3rem; margin-bottom: 0.5rem; text-shadow: 2px 2px 4px rgba(2, 81, 89, 0.5); color: white;'>WA-SUI 和水</h1>
+            <p style='font-size: 1.2rem; margin: 0; opacity: 0.9; color: white;'>〜 水の流れのような調和とデザイン 〜</p>
+        </div>
+        """)
+        
+        with gr.Tabs():
+            
+            # 基本入力コンポーネント
+            with gr.Tab("🌊 基本入力"):
+                gr.Markdown("### 様々な入力コンポーネント")
+                
+                with gr.Row():
+                    with gr.Column():
+                        name_input = gr.Textbox(
+                            label="🌊 お名前", 
+                            placeholder="海野太郎",
+                            info="フルネームを入力してください"
+                        )
+                        
+                        age_input = gr.Number(
+                            label="🎂 年齢",
+                            minimum=0,
+                            maximum=120,
+                            value=25
+                        )
+                        
+                        mood_selector = gr.Radio(
+                            choices=["🌊 爽やか", "💧 静寂", "🏖️ 穏やか"],
+                            label="🎭 今日の気分",
+                            value="💧 静寂"
+                        )
+                        
+                        subscribe_check = gr.Checkbox(
+                            label="📧 海のお便りを購読する",
+                            value=False
+                        )
+                        
+                    with gr.Column():
+                        hobbies = gr.CheckboxGroup(
+                            choices=["🏄‍♂️ サーフィン", "🐠 釣り", "🌊 海水浴", "🏃‍♂️ ジョギング", "🍵 茶道", "🎨 水彩画"],
+                            label="趣味（複数選択可）",
+                            value=["🐠 釣り"],
+                            interactive=True
+                        )
+                        
+                        prefecture = gr.Dropdown(
+                            choices=["北海道", "神奈川県", "静岡県", "愛知県", "三重県", "沖縄県"],
+                            label="🗾 都道府県（海に近い県）",
+                            value="神奈川県",
+                            interactive=True
+                        )
+                        
+                        satisfaction = gr.Slider(
+                            minimum=1,
+                            maximum=10,
+                            value=8,
+                            step=1,
+                            label="🌊 満足度（波の高さで表現：1-10）",
+                            interactive=True,
+                            show_label=True
+                        )
+                        
+                        # デバッグ用：選択された趣味を表示
+                        hobbies_debug = gr.Textbox(
+                            label="🔍 選択中の趣味（デバッグ用）",
+                            interactive=False,
+                            value="🐠 釣り"
+                        )
+                        
+                        # デバッグ用：都道府県と満足度を表示
+                        status_debug = gr.Textbox(
+                            label="🔍 都道府県・満足度（デバッグ用）",
+                            interactive=False,
+                            value="神奈川県, 満足度: 8"
+                        )
+                        
+                        # デバッグ用：満足度の生の値を表示
+                        satisfaction_debug = gr.Textbox(
+                            label="🔍 満足度の生の値（デバッグ用）",
+                            interactive=False,
+                            value="8"
+                        )
+                
+                with gr.Row():
+                    submit_btn = gr.Button("🌊 情報を送信", variant="primary", size="lg")
+                    clear_btn = gr.Button("🗑️ クリア", variant="secondary")
+                
+                result_output = gr.Textbox(
+                    label="💌 結果",
+                    interactive=False,
+                    lines=4
+                )
+                
+                # イベントハンドラーの修正
+                submit_btn.click(
+                    fn=greet,
+                    inputs=[name_input, mood_selector, age_input, subscribe_check, hobbies, prefecture, satisfaction],
+                    outputs=result_output
+                )
+                
+                # クリアボタンの修正
+                clear_btn.click(
+                    fn=clear_all_inputs,
+                    inputs=None,
+                    outputs=[name_input, age_input, mood_selector, subscribe_check, 
+                           hobbies, prefecture, satisfaction, hobbies_debug, status_debug, satisfaction_debug, result_output]
+                )
+                
+                # 趣味選択の変更を監視
+                hobbies.change(
+                    fn=update_hobbies_debug,
+                    inputs=[hobbies],
+                    outputs=[hobbies_debug]
+                )
+                
+                # 都道府県と満足度の変更を監視
+                prefecture.change(
+                    fn=update_status_debug,
+                    inputs=[prefecture, satisfaction],
+                    outputs=[status_debug]
+                )
+                
+                satisfaction.change(
+                    fn=update_status_debug,
+                    inputs=[prefecture, satisfaction],
+                    outputs=[status_debug]
+                )
+                
+                # 満足度専用の監視
+                satisfaction.change(
+                    fn=update_satisfaction_debug,
+                    inputs=[satisfaction],
+                    outputs=[satisfaction_debug]
+                )
+            
+            # 俳句生成
+            with gr.Tab("🎋 海の俳句工房"):
+                gr.Markdown("### AI海洋俳句生成システム")
+                
+                with gr.Row():
+                    with gr.Column():
+                        season_selector = gr.Radio(
+                            choices=["🌊 海", "💧 雨", "🌙 月", "❄️ 雪"],
+                            label="🌊 季語を選択",
+                            value="🌊 海"
+                        )
+                        
+                        style_selector = gr.Radio(
+                            choices=["古典", "現代"],
+                            label="🎨 スタイル",
+                            value="古典"
+                        )
+                        
+                        haiku_btn = gr.Button("🌊 俳句を作る", variant="primary", size="lg")
+                        
+                    with gr.Column(scale=2):
+                        haiku_result = gr.Textbox(
+                            label="📜 生成された俳句",
+                            interactive=False,
+                            lines=5,
+                            placeholder="ここに美しい海の俳句が表示されます...",
+                        )
+                        
+                        gr.Markdown("""
+                        **俳句の説明:**
+                        - **古典**: 伝統的な海の表現スタイル
+                        - **現代**: 現代的な海の言葉遣い
+                        """)
+                
+                haiku_btn.click(
+                    fn=generate_haiku,
+                    inputs=[season_selector, style_selector],
+                    outputs=haiku_result
+                )
+            
+            # データ表示
+            with gr.Tab("📊 海のデータ"):
+                gr.Markdown("### データ表示コンポーネント")
+                
+                with gr.Row():
+                    with gr.Column():
+                        price_filter = gr.Slider(
+                            minimum=200,
+                            maximum=500,
+                            value=300,
+                            step=50,
+                            label="💰 最低価格フィルター"
+                        )
+                        
+                        refresh_btn = gr.Button("🔄 データ更新", variant="secondary")
+                        
+                        # JSON表示
+                        json_data = gr.JSON(
+                            value={
+                                "店舗名": "海風カフェ 碧",
+                                "営業時間": "9:00-21:00",
+                                "定休日": "火曜日",
+                                "メニュー数": 15,
+                                "人気商品": ["碧海ラテ", "海風スイーツセット"]
+                            },
+                            label="📋 店舗情報（JSON）"
+                        )
+                        
+                    with gr.Column(scale=2):
+                        # データフレーム表示
+                        data_display = gr.DataFrame(
+                            value=sample_data,
+                            label="🌊 海のメニューデータ",
+                            interactive=True,
+                            wrap=True
+                        )
+                        
+                        # ラベル表示
+                        label_display = gr.Label(
+                            value={
+                                "海の見える店": 0.95,
+                                "潮風感じる": 0.88,
+                                "青い空気": 0.75,
+                                "波音聞こえる": 0.62
+                            },
+                            label="🏆 海のカフェ評価スコア"
+                        )
+                
+                refresh_btn.click(
+                    fn=process_data,
+                    inputs=[data_display, price_filter],
+                    outputs=data_display
+                )
+            
+            # チャットボット
+            with gr.Tab("💬 海のチャットボット"):
+                gr.Markdown("### 海風AIアシスタントと会話")
+                
+                with gr.Row():
+                    with gr.Column(scale=2):
+                        chatbot = gr.Chatbot(
+                            value=[["こんにちは！", "こんにちは！海風カフェ碧のAIアシスタントです。海のようにゆったりとお手伝いさせていただきます🌊"]],
+                            label="🤖 海風AIアシスタント",
+                            height=400
+                        )
+                        
+                        with gr.Row():
+                            chat_input = gr.Textbox(
+                                placeholder="波のようにメッセージを入力してください...",
+                                label="",
+                                scale=4
+                            )
+                            send_btn = gr.Button("🌊 送信", variant="primary", scale=1)
+                        
+                        # クイック返信ボタン
+                        with gr.Row():
+                            quick1 = gr.Button("☕ 海のメニューは？", size="sm")
+                            quick2 = gr.Button("🕐 営業時間は？", size="sm")
+                            quick3 = gr.Button("📍 海までの道は？", size="sm")
+                    
+                    with gr.Column():
+                        gr.Markdown("### 💡 海の便利機能")
+                        
+                        gr.Markdown("""
+                        **質問例:**
+                        - 海を眺められるメニュー
+                        - 潮風を感じる営業時間
+                        - 海辺へのアクセス方法
+                        - 海の見える席の予約
+                        - 海風イベント情報
+                        """)
+                        
+                        # アコーディオン
+                        with gr.Accordion("🔧 詳細設定", open=False):
+                            temperature = gr.Slider(
+                                minimum=0.1,
+                                maximum=2.0,
+                                value=0.7,
+                                step=0.1,
+                                label="🌡️ 応答の流動性（波の動き）"
+                            )
+                            
+                            max_tokens = gr.Slider(
+                                minimum=50,
+                                maximum=500,
+                                value=150,
+                                step=25,
+                                label="📏 最大応答長（潮の満ち引き）"
+                            )
+                
+                # チャット機能の実装
+                send_btn.click(
+                    fn=add_chat_message,
+                    inputs=[chat_input, chatbot],
+                    outputs=[chatbot, chat_input]
+                )
+                
+                chat_input.submit(
+                    fn=add_chat_message,
+                    inputs=[chat_input, chatbot],
+                    outputs=[chatbot, chat_input]
+                )
+                
+                # クイック返信の修正
+                def quick_reply_1(history):
+                    new_history = history + [["海のメニューは？", "碧海ラテと海風スイーツセットが人気です！季節限定の潮風もちもおすすめです。🌊"]]
+                    return new_history
+                
+                def quick_reply_2(history):
+                    new_history = history + [["営業時間は？", "海の見える時間、9:00-21:00で営業しています。定休日は火曜日です。🌅🌅"]]
+                    return new_history
+                
+                def quick_reply_3(history):
+                    new_history = history + [["海までの道は？", "JR東海道線「大磯駅」から徒歩5分です。海岸線沿いの青い建物が目印です。🏖️"]]
+                    return new_history
+                
+                quick1.click(
+                    fn=quick_reply_1,
+                    inputs=[chatbot],
+                    outputs=[chatbot]
+                )
+                
+                quick2.click(
+                    fn=quick_reply_2,
+                    inputs=[chatbot],
+                    outputs=[chatbot]
+                )
+                
+                quick3.click(
+                    fn=quick_reply_3,
+                    inputs=[chatbot],
+                    outputs=[chatbot]
+                )
+            
+            # テーマ設定
+            with gr.Tab("🌊 WA-SUI設定"):
+                gr.Markdown("### WA-SUI（和水）テーマの哲学")
+                
+                # カラーパレット表示
+                gr.HTML("""
+                <div style='display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin: 2rem 0;'>
+                    <div style='padding: 1.5rem; background: #ffffff; border: 2px solid #037F8C; border-radius: 12px; text-align: center; transition: transform 0.2s; box-shadow: 0 4px 12px rgba(174, 211, 242, 0.3);'>
+                        <h4 style='color: #025159; margin-top: 0;'>🤍 純白の背景</h4>
+                        <div style='width: 100%; height: 60px; background: #ffffff; border: 2px solid #AED3F2; border-radius: 8px; margin: 1rem 0; box-shadow: 0 4px 8px rgba(0,0,0,0.1);'></div>
+                        <p style='font-size: 0.9rem; color: #025159; margin: 0;'>#ffffff - メイン背景</p>
+                    </div>
+                    <div style='padding: 1.5rem; background: #ffffff; border: 2px solid #037F8C; border-radius: 12px; text-align: center; transition: transform 0.2s; box-shadow: 0 4px 12px rgba(174, 211, 242, 0.3);'>
+                        <h4 style='color: #025159; margin-top: 0;'>🌊 水面の輝き</h4>
+                        <div style='width: 100%; height: 60px; background: #AED3F2; border-radius: 8px; margin: 1rem 0; box-shadow: 0 4px 8px rgba(0,0,0,0.1);'></div>
+                        <p style='font-size: 0.9rem; color: #025159; margin: 0;'>#AED3F2 - アクセント</p>
+                    </div>
+                    <div style='padding: 1.5rem; background: #ffffff; border: 2px solid #037F8C; border-radius: 12px; text-align: center; transition: transform 0.2s; box-shadow: 0 4px 12px rgba(3, 101, 140, 0.3);'>
+                        <h4 style='color: #025159; margin-top: 0;'>🌀 深い海</h4>
+                        <div style='width: 100%; height: 60px; background: #03658C; border-radius: 8px; margin: 1rem 0; box-shadow: 0 4px 8px rgba(0,0,0,0.1);'></div>
+                        <p style='font-size: 0.9rem; color: #025159; margin: 0;'>#03658C - プライマリ</p>
+                    </div>
+                    <div style='padding: 1.5rem; background: #ffffff; border: 2px solid #037F8C; border-radius: 12px; text-align: center; transition: transform 0.2s; box-shadow: 0 4px 12px rgba(3, 127, 140, 0.3);'>
+                        <h4 style='color: #025159; margin-top: 0;'>🌊 中間の深さ</h4>
+                        <div style='width: 100%; height: 60px; background: #037F8C; border-radius: 8px; margin: 1rem 0; box-shadow: 0 4px 8px rgba(0,0,0,0.1);'></div>
+                        <p style='font-size: 0.9rem; color: #025159; margin: 0;'>#037F8C - ボーダー</p>
+                    </div>
+                    <div style='padding: 1.5rem; background: #ffffff; border: 2px solid #037F8C; border-radius: 12px; text-align: center; transition: transform 0.2s; box-shadow: 0 4px 12px rgba(1, 80, 89, 0.3);'>
+                        <h4 style='color: #025159; margin-top: 0;'>🕳️ 深海の静寂</h4>
+                        <div style='width: 100%; height: 60px; background: #025159; border-radius: 8px; margin: 1rem 0; box-shadow: 0 4px 8px rgba(0,0,0,0.1);'></div>
+                        <p style='font-size: 0.9rem; color: #025159; margin: 0;'>#025159 - テキスト</p>
+                    </div>
+                    <div style='padding: 1.5rem; background: #ffffff; border: 2px solid #037F8C; border-radius: 12px; text-align: center; transition: transform 0.2s; box-shadow: 0 4px 12px rgba(3, 165, 165, 0.3);'>
+                        <h4 style='color: #025159; margin-top: 0;'>💎 ティールの調和</h4>
+                        <div style='width: 100%; height: 60px; background: #03A6A6; border-radius: 8px; margin: 1rem 0; box-shadow: 0 4px 8px rgba(0,0,0,0.1);'></div>
+                        <p style='font-size: 0.9rem; color: #025159; margin: 0;'>#03A6A6 - セカンダリ</p>
+                    </div>
+                </div>
+                """)
+                
+                gr.Markdown("""
+                ### 🌊 WA-SUI（和水）デザイン哲学
+                
+                **流（りゅう）- Flow**
+                - 水の自然な流れを表現
+                - 要素間の滑らかな遷移
+                - ユーザーの操作における流動性
+                
+                **調（ちょう）- Harmony**
+                - 純白の背景: 清潔で読みやすい基盤
+                - 水面の輝き: 美しいアクセントカラー
+                - 深い海: 信頼感のある主要アクション
+                - 中間の深さ: バランスの取れた境界
+                - 深海の静寂: 読みやすいテキスト
+                - ティールの調和: 優美なセカンダリアクション
+                
+                **透（とう）- Transparency**
+                - 直感的で透明な操作性
+                - 水のような清らかさ
+                - 心地よいユーザー体験
+                - 海の広がりのような開放感
+                
+                **和（わ）- Japanese Harmony**
+                - 日本の美意識との融合
+                - 水と技術の調和
+                - 現代と伝統の共存
+                - 心の安らぎを与える設計
+                """)
+                
+                # デモコンポーネント
+                gr.Markdown("### 🛠️ WA-SUI コンポーネント実装")
+                
+                with gr.Row():
+                    demo_slider = gr.Slider(0, 100, 50, label="🌊 波の高さ")
+                    demo_checkbox = gr.Checkbox(True, label="☑️ 海風を感じる")
+                    demo_radio = gr.Radio(["凪", "波", "嵐"], label="📻 海の状態", value="波")
+                
+                with gr.Row():
+                    demo_dropdown = gr.Dropdown(["深海", "浅瀬", "潮だまり"], label="📋 海の深さ")
+                    demo_number = gr.Number(label="🔢 波の数", value=108)
+                    demo_textbox = gr.Textbox(label="📝 海への想い", placeholder="海のように広い心で...")
+                
+                # ボタンバリエーション
+                gr.Markdown("### 🔘 WA-SUI アクション")
+                with gr.Row():
+                    gr.Button("🌊 波を起こす", variant="primary")
+                    gr.Button("💧 静寂にする", variant="secondary")
+                    gr.Button("⛔ 嵐を止める", variant="stop")
+                
+                # 海の音効果（デモ用）
+                gr.Markdown("### 🎵 海の音効果")
+                with gr.Row():
+                    wave_sound = gr.Audio(label="🌊 波の音", interactive=False)
+                    rain_sound = gr.Audio(label="☔ 雨の音", interactive=False)
+                
+                gr.Markdown("""
+                ### 📚 WA-SUI 使用ガイド
+                
+                **適用シーン:**
+                - 🏖️ 海辺のカフェ・レストラン
+                - 🏊‍♂️ フィットネス・スパアプリ
+                - 🧘‍♀️ 瞑想・リラクゼーションアプリ
+                - 🌊 海洋関連の教育アプリ
+                - 💧 水質管理システム
+                
+                **デザイン原則:**
+                - 流れるような操作感
+                - 海の深さを表現した階層
+                - 水の透明感を活かしたレイアウト
+                - 日本的な美意識の組み込み
+                """)
+    
+    return demo
 
+# アプリケーションの実行
 if __name__ == "__main__":
-    demo.launch()
+    print("WA-SUI（和水）- 海と水のテーマ UIコンポーネント集")
+    print("=" * 60)
+    
+    app = create_comprehensive_demo()
+    app.launch(
+        share=True,
+        server_name="0.0.0.0",
+        server_port=7871,
+        show_error=True
+    )