Upload app.py

app.py

@@ -3,6 +3,8 @@ import torch
 from transformers import Qwen3VLForConditionalGeneration, AutoProcessor
 from PIL import Image
 import numpy as np
+import base64
+from io import BytesIO
 
 # モデルとプロセッサの読み込み
 model_name = "Qwen/Qwen3-VL-4B-Instruct"
@@ -103,23 +105,126 @@ def transcribe_handwriting(image):
     return output_text[0] if output_text else "文字を認識できませんでした。"
 
 
-def process_sketch(image_dict):
-    """ImageEditorからの入力を処理"""
-    if image_dict is None:
+def process_canvas(base64_data):
+    """Canvasからのbase64データを処理"""
+    if not base64_data or base64_data == "":
         return "手書きしてください。"
 
-    # gr.ImageEditorの出力は辞書形式: {"background": ..., "layers": [...], "composite": ...}
-    if isinstance(image_dict, dict):
-        image = image_dict.get("composite")
-        if image is None:
-            image = image_dict.get("background")
-    else:
-        image = image_dict
-
-    if image is None:
-        return "手書きしてください。"
-
-    return transcribe_handwriting(image)
+    try:
+        # data:image/png;base64,... の形式から実際のbase64部分を取得
+        if "," in base64_data:
+            base64_data = base64_data.split(",")[1]
+
+        # base64デコード
+        image_data = base64.b64decode(base64_data)
+        image = Image.open(BytesIO(image_data))
+
+        return transcribe_handwriting(image)
+    except Exception as e:
+        return f"エラーが発生しました: {str(e)}"
+
+
+# カスタムHTML Canvasとdrawing JavaScript
+canvas_html = """
+<div id="canvas-container" style="display: flex; flex-direction: column; align-items: center; gap: 10px;">
+    <canvas id="sketch-canvas" width="600" height="400"
+            style="border: 2px solid #333; background: white; cursor: crosshair; touch-action: none;"></canvas>
+    <button id="clear-btn" type="button"
+            style="padding: 8px 20px; background: #ff4444; color: white; border: none; border-radius: 5px; cursor: pointer;">
+        クリア
+    </button>
+</div>
+<script>
+(function() {
+    const canvas = document.getElementById('sketch-canvas');
+    const ctx = canvas.getContext('2d');
+    const clearBtn = document.getElementById('clear-btn');
+
+    let isDrawing = false;
+    let lastX = 0;
+    let lastY = 0;
+
+    // 初期化
+    ctx.fillStyle = 'white';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.strokeStyle = '#000000';
+    ctx.lineWidth = 3;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    function getPos(e) {
+        const rect = canvas.getBoundingClientRect();
+        const scaleX = canvas.width / rect.width;
+        const scaleY = canvas.height / rect.height;
+
+        if (e.touches) {
+            return {
+                x: (e.touches[0].clientX - rect.left) * scaleX,
+                y: (e.touches[0].clientY - rect.top) * scaleY
+            };
+        }
+        return {
+            x: (e.clientX - rect.left) * scaleX,
+            y: (e.clientY - rect.top) * scaleY
+        };
+    }
+
+    function startDrawing(e) {
+        isDrawing = true;
+        const pos = getPos(e);
+        lastX = pos.x;
+        lastY = pos.y;
+        e.preventDefault();
+    }
+
+    function draw(e) {
+        if (!isDrawing) return;
+        e.preventDefault();
+
+        const pos = getPos(e);
+        ctx.beginPath();
+        ctx.moveTo(lastX, lastY);
+        ctx.lineTo(pos.x, pos.y);
+        ctx.stroke();
+        lastX = pos.x;
+        lastY = pos.y;
+    }
+
+    function stopDrawing(e) {
+        isDrawing = false;
+        e.preventDefault();
+    }
+
+    // Mouse events
+    canvas.addEventListener('mousedown', startDrawing);
+    canvas.addEventListener('mousemove', draw);
+    canvas.addEventListener('mouseup', stopDrawing);
+    canvas.addEventListener('mouseout', stopDrawing);
+
+    // Touch events
+    canvas.addEventListener('touchstart', startDrawing);
+    canvas.addEventListener('touchmove', draw);
+    canvas.addEventListener('touchend', stopDrawing);
+
+    // Clear button
+    clearBtn.addEventListener('click', function() {
+        ctx.fillStyle = 'white';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+    });
+})();
+</script>
+"""
+
+# JavaScriptでCanvasからbase64を取得
+get_canvas_js = """
+async (current_value) => {
+    const canvas = document.getElementById('sketch-canvas');
+    if (canvas) {
+        return canvas.toDataURL('image/png');
+    }
+    return '';
+}
+"""
 
 
 # Gradioインターフェースの構築
@@ -157,26 +262,27 @@ with gr.Blocks(title="手書き文字認識システム") as demo:
 
     with gr.Tab("手書き入力"):
         gr.Markdown("マウスやタッチで文字を書いてください。")
+
+        # カスタムCanvas
+        canvas = gr.HTML(canvas_html)
+
+        # 隠しテキストボックス（Canvas dataを受け取る）
+        canvas_data = gr.Textbox(visible=False, elem_id="canvas-data")
+
         with gr.Row():
-            with gr.Column():
-                sketch_input = gr.ImageEditor(
-                    label="手書きエリア",
-                    sources=(),
-                    brush=gr.Brush(colors=["#000000"], color_mode="fixed"),
-                    canvas_size=(600, 400),
-                    type="pil",
-                )
-                sketch_btn = gr.Button("文字を認識", variant="primary")
-            with gr.Column():
-                sketch_output = gr.Textbox(
-                    label="認識結果",
-                    lines=10,
-                )
+            sketch_btn = gr.Button("文字を認識", variant="primary")
+
+        sketch_output = gr.Textbox(
+            label="認識結果",
+            lines=10,
+        )
 
+        # ボタンクリック時にJSでcanvasデータを取得してから処理
         sketch_btn.click(
-            fn=process_sketch,
-            inputs=sketch_input,
-            outputs=sketch_output,
+            fn=process_canvas,
+            inputs=[canvas_data],
+            outputs=[sketch_output],
+            js=get_canvas_js,
         )
 
     gr.Markdown(