File size: 13,031 Bytes
84d8a7a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8608413
84d8a7a
 
13396b0
84d8a7a
 
 
8608413
 
 
84d8a7a
 
 
 
 
 
 
 
8608413
caf810b
8608413
 
84d8a7a
caf810b
 
84d8a7a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
caf810b
 
 
8608413
 
 
84d8a7a
caf810b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8608413
84d8a7a
8608413
 
 
 
84d8a7a
 
 
8608413
caf810b
8608413
 
 
 
 
caf810b
8608413
 
caf810b
13396b0
 
 
 
 
 
 
 
caf810b
 
 
 
 
 
 
 
 
 
 
 
 
8608413
 
 
 
caf810b
13396b0
8608413
84d8a7a
 
8608413
 
 
13396b0
 
 
 
 
 
 
84d8a7a
 
 
 
 
 
8608413
84d8a7a
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
import gradio as gr
import math
import PIL.Image
import PIL.ImageFilter
import PIL.ImageEnhance
import numpy as np
from typing import Optional

def calculator(operation: str, a: float, b: float) -> str:
    """
    基本的な計算機能を提供します。
    
    Args:
        operation: 実行する演算 (add, subtract, multiply, divide, power, sqrt)
        a: 最初の数値
        b: 二番目の数値(sqrt以外で必要)
    
    Returns:
        str: 計算結果
    """
    try:
        if operation == "add":
            result = a + b
        elif operation == "subtract":
            result = a - b
        elif operation == "multiply":
            result = a * b
        elif operation == "divide":
            if b == 0:
                return "エラー: ゼロで割ることはできません"
            result = a / b
        elif operation == "power":
            result = a ** b
        elif operation == "sqrt":
            if a < 0:
                return "エラー: 負の数の平方根は計算できません"
            result = math.sqrt(a)
        else:
            return f"エラー: 未対応の演算 '{operation}'"
        
        return f"結果: {result}"
    except Exception as e:
        return f"計算エラー: {str(e)}"

def image_processor(image: PIL.Image.Image, 
                   effect: str = "blur", 
                   intensity: float = 1.0) -> PIL.Image.Image:
    """
    画像にエフェクトを適用します。
    
    Args:
        image: 入力画像
        effect: 適用するエフェクト (blur, sharpen, brightness, contrast)
        intensity: エフェクトの強度 (0.1-3.0)
    
    Returns:
        PIL.Image.Image: 処理済み画像
    """
    if image is None:
        return None
    
    try:
        # intensityを適切な範囲に制限
        intensity = max(0.1, min(3.0, intensity))
        
        if effect == "blur":
            return image.filter(PIL.ImageFilter.GaussianBlur(radius=intensity))
        elif effect == "sharpen":
            return image.filter(PIL.ImageFilter.UnsharpMask(radius=intensity))
        elif effect == "brightness":
            enhancer = PIL.ImageEnhance.Brightness(image)
            return enhancer.enhance(intensity)
        elif effect == "contrast":
            enhancer = PIL.ImageEnhance.Contrast(image)
            return enhancer.enhance(intensity)
        else:
            return image
    except Exception as e:
        print(f"画像処理エラー: {e}")
        return image

def text_analyzer(text: str) -> str:
    """
    テキストを分析して統計情報を返します。
    
    Args:
        text: 分析するテキスト
    
    Returns:
        str: テキスト分析結果
    """
    if not text:
        return "テキストが入力されていません。"
    
    try:
        # 基本統計
        char_count = len(text)
        word_count = len(text.split())
        line_count = len(text.split('\n'))
        
        # 文字種別カウント
        alpha_count = sum(1 for c in text if c.isalpha())
        digit_count = sum(1 for c in text if c.isdigit())
        space_count = sum(1 for c in text if c.isspace())
        
        analysis = f"""📊 テキスト分析結果:
        
📏 基本統計:
• 文字数: {char_count}
• 単語数: {word_count}
• 行数: {line_count}

🔤 文字種別:
• 英字: {alpha_count}
• 数字: {digit_count}
• 空白: {space_count}

📈 密度:
• 平均単語長: {char_count/word_count:.1f}文字 (単語数 > 0の場合)
• 英字比率: {alpha_count/char_count*100:.1f}%
"""
        return analysis
    except Exception as e:
        return f"分析エラー: {str(e)}"

# メインアプリケーションの作成
with gr.Blocks(
    title="Gradio Streamable HTTP MCP Demo - MakiAi",
    theme=gr.themes.Soft(),
    css="""

    .tab-nav button {
        font-size: 16px !important;
    }
    .markdown-body h2 {
        color: #2563eb !important;
    }
    """
) as demo:
    
    gr.Markdown("""
    # 🚀 Gradio Streamable HTTP MCP デモアプリ
    
    このアプリは、Gradio の新しい **Streamable HTTP Transport for MCP server** 機能のデモです。
    
    ## 🔗 ライブ MCP エンドポイント
    以下のエンドポイントで**MCP Inspector**や対応クライアントからMCPツールにアクセスできます:
    - **HTTP Transport**: `https://makiai-gradio-streamable-mcp-demo.hf.space/gradio_api/mcp/http/`
    - **SSE Transport**: `https://makiai-gradio-streamable-mcp-demo.hf.space/gradio_api/mcp/sse`
    
    **⚠️ 注意**: Claude Desktop は現在 HTTP transport に対応していません。MCP Inspector での動作確認をお勧めします。
    
    ## 🛠️ 利用可能なツール
    """)
    
    with gr.Tabs():
        
        # Calculator Tab
        with gr.Tab("🧮 Calculator", id="calculator"):
            gr.Markdown("### 数学計算ツール")
            
            with gr.Row():
                with gr.Column():
                    calc_operation = gr.Dropdown(
                        choices=["add", "subtract", "multiply", "divide", "power", "sqrt"],
                        value="add",
                        label="演算"
                    )
                    calc_a = gr.Number(value=10, label="数値 A")
                    calc_b = gr.Number(value=5, label="数値 B (sqrt以外で使用)")
                
                with gr.Column():
                    calc_result = gr.Textbox(label="計算結果", interactive=False)
                    calc_btn = gr.Button("計算実行", variant="primary")
            
            calc_btn.click(
                fn=calculator,
                inputs=[calc_operation, calc_a, calc_b],
                outputs=calc_result
            )
        
        # Image Processor Tab
        with gr.Tab("🖼️ Image Processor", id="image_processor"):
            gr.Markdown("### 画像処理ツール")
            
            with gr.Row():
                with gr.Column():
                    input_image = gr.Image(
                        label="入力画像",
                        type="pil",
                        height=300
                    )
                    effect_type = gr.Dropdown(
                        choices=["blur", "sharpen", "brightness", "contrast"],
                        value="blur",
                        label="エフェクト"
                    )
                    effect_intensity = gr.Slider(
                        minimum=0.1,
                        maximum=3.0,
                        value=1.0,
                        step=0.1,
                        label="強度"
                    )
                
                with gr.Column():
                    output_image = gr.Image(
                        label="処理済み画像",
                        height=300
                    )
                    process_btn = gr.Button("画像処理実行", variant="primary")
            
            process_btn.click(
                fn=image_processor,
                inputs=[input_image, effect_type, effect_intensity],
                outputs=output_image
            )
        
        # Text Analyzer Tab
        with gr.Tab("📝 Text Analyzer", id="text_analyzer"):
            gr.Markdown("### テキスト分析ツール")
            
            with gr.Row():
                with gr.Column():
                    input_text = gr.Textbox(
                        label="分析対象テキスト",
                        placeholder="ここにテキストを入力してください...",
                        lines=8,
                        value="Hello World! これはサンプルテキストです。\n日本語と英語が混在しています。"
                    )
                
                with gr.Column():
                    analysis_result = gr.Textbox(
                        label="分析結果",
                        lines=15,
                        interactive=False
                    )
                    analyze_btn = gr.Button("テキスト分析実行", variant="primary")
            
            analyze_btn.click(
                fn=text_analyzer,
                inputs=input_text,
                outputs=analysis_result
            )
    
    gr.Markdown("""
    ## 📋 MCP クライアントでの使用方法
    
    ### 🧪 **動作確認済みの方法**
    
    **✅ MCP Inspector(最推奨)**:
    ```bash
    npx @modelcontextprotocol/inspector https://makiai-gradio-streamable-mcp-demo.hf.space/gradio_api/mcp/http/
    ```
    
    **✅ cURL でのテスト**:
    ```bash
    curl -X POST https://makiai-gradio-streamable-mcp-demo.hf.space/gradio_api/mcp/http/ \
      -H "Content-Type: application/json" \
      -d '{"jsonrpc": "2.0", "method": "tools/list", "id": 1}'
    ```
    
    ### 🖥️ **Claude Desktop での制限と代替手段**
    
    **⚠️ 重要**: Claude Desktop は現在 HTTP transport を直接サポートしていません。STDIO transport のみがサポートされています。
    
    **🔧 代替解決策**:
    
    **1. MCP Inspector での直接テスト(推奨)**:
    ```bash
    npx @modelcontextprotocol/inspector https://makiai-gradio-streamable-mcp-demo.hf.space/gradio_api/mcp/http/
    ```
    
    **2. 他のMCPクライアントでの使用**:
    - **Cursor IDE**: HTTP transport をサポート
    - **LibreChat**: HTTP transport をサポート  
    - **VSCode 拡張**: 各種MCP拡張で利用可能
    
    **3. STDIO-HTTP Proxy を使用**:
    ```bash
    # proxy サーバーを作成してClaude Desktopで使用
    # 詳細: https://github.com/boilingdata/mcp-server-and-gw
    ```
    
    ### 🛠️ **利用可能なツール**
    - **`calculator`**: 基本的な数学計算(加算、減算、乗算、除算、べき乗、平方根)
    - **`image_processor`**: 画像エフェクト処理(ぼかし、シャープ化、明度、コントラスト調整)
    - **`text_analyzer`**: テキスト統計分析(文字数、単語数、文字種別分析)
    
    ## 🔧 技術詳細
    
    - **🌐 Space URL**: [Hugging Face Space](https://huggingface.co/spaces/MakiAi/gradio-streamable-mcp-demo)
    - **🚀 Transport**: Streamable HTTP (**最新機能!**)
    - **📡 Protocol**: MCP (Model Context Protocol)
    - **🔗 HTTP Endpoint**: `https://makiai-gradio-streamable-mcp-demo.hf.space/gradio_api/mcp/http/`
    - **📺 SSE Endpoint**: `https://makiai-gradio-streamable-mcp-demo.hf.space/gradio_api/mcp/sse`
    - **✨ Features**: ファイル入出力対応、リアルタイム処理、状態管理
    
    ## 🎯 デモの特徴と現在の対応状況
    
    このアプリは **Gradio PR #11300** で実装された最新の Streamable HTTP Transport 機能を使用しています。
    
    **📦 必要な Dependencies**:
    ```text
    # Gradio with MCP support (特定のプレビューバージョン)
    https://gradio-pypi-previews.s3.amazonaws.com/5bf3a9365e945803ba3b30ec470058c0d1aea03a/gradio-5.31.0-py3-none-any.whl
    Pillow>=10.0.0
    numpy>=1.21.0
    ```
    
    **✅ 動作確認済み**:
    - MCP Inspector での直接アクセス
    - Cursor IDE での HTTP transport
    - LibreChat での HTTP transport
    - cURL/HTTPクライアントでの直接API呼び出し
    
    **⚠️ 制限事項**:
    - Claude Desktop は現在 STDIO transport のみサポート
    - HTTP transport は Claude Desktop で直接使用不可
    
    **🔮 今後の展望**:
    - Claude Desktop での HTTP transport サポート予定
    - より多くのMCPクライアントでの対応拡大
    
    **🔗 関連リンク**:
    - [Original PR #11300](https://github.com/gradio-app/gradio/pull/11300)
    - [MCP Protocol](https://modelcontextprotocol.io/)
    - [MCP Community Discussion](https://github.com/orgs/modelcontextprotocol/discussions/16)
    - [Reference Space by abidlabs](https://huggingface.co/spaces/abidlabs/mcp-tool-http)
    - [Gradio MCP Documentation](https://gradio.app/docs/mcp)
    """)

# アプリケーションの設定とデプロイ
# Live Demo: https://huggingface.co/spaces/MakiAi/gradio-streamable-mcp-demo
# MCP HTTP Endpoint: https://makiai-gradio-streamable-mcp-demo.hf.space/gradio_api/mcp/http/
#
# 📋 IMPORTANT: Hugging Face Space デプロイ用 requirements.txt:
# https://gradio-pypi-previews.s3.amazonaws.com/5bf3a9365e945803ba3b30ec470058c0d1aea03a/gradio-5.31.0-py3-none-any.whl
# Pillow>=10.0.0
# numpy>=1.21.0
#
# このプレビューバージョンには PR #11300 のStreamable HTTP Transport機能が含まれています
if __name__ == "__main__":
    demo.launch(
        server_name="0.0.0.0",
        server_port=7860,
        share=False,
        show_error=True,
        mcp_server=True,  # 🚀 Streamable HTTP Transport for MCP を有効化!
        inbrowser=False
    )