Spaces:
Sleeping
Sleeping
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
) |