Update app.py

app.py

@@ -556,61 +556,146 @@ def _get_mouse_pos(display: str) -> tuple:
         return 0, 0
 
 
-def capture_with_grid(display: str, scale: float = 0.65, quality: int = 72,
-                      force_mx: int | None = None,
-                      force_my: int | None = None) -> dict:
-    """يلتقط الشاشة من display محدد ويضيف Grid overlay."""
-    from PIL import Image, ImageDraw
-
-    img, ow, oh = _capture_raw(display)
-    if img is None:
-        return {"data": "", "width": 1920, "height": 1080, "mouse_x": 0, "mouse_y": 0}
+def _draw_mouse_marker(draw, msx, msy, color=(255, 50, 50, 240)):
+    """يرسم علامة الماوس (دائرة + خطوط تقاطع) في نقطة محددة على صورة."""
+    r = 11
+    line_color = (color[0], color[1], color[2], 200)
+    draw.ellipse([(msx-r, msy-r), (msx+r, msy+r)], outline=color, width=2)
+    draw.line([(msx-18, msy), (msx+18, msy)], fill=line_color, width=1)
+    draw.line([(msx, msy-18), (msx, msy+18)], fill=line_color, width=1)
 
-    mx, my = (force_mx, force_my) if force_mx is not None else _get_mouse_pos(display)
 
-    sw = int(ow * scale)
-    sh = int(oh * scale)
-    grid_img = img.resize((sw, sh), Image.LANCZOS)
-    draw = ImageDraw.Draw(grid_img, "RGBA")
+def _render_grid_variant(base_img, ow, oh, sw, sh, mx, my, display,
+                         grid_step: int, line_color: tuple, label_every: int,
+                         major_only_labels: bool = True) -> "Image.Image":
+    """
+    يرسم نسخة شبكة إحداثيات واحدة فوق نسخة من الصورة الأساسية.
+      grid_step        → المسافة بالبكسل الحقيقي بين كل خط شبكة.
+      line_color       → لون الخطوط والأرقام (RGBA)، مثل أخضر/سماوي أو أحمر.
+      label_every      → كل كم بكسل حقيقي تُكتب فيه تسمية إحداثي (x,y) كاملة عند التقاطعات.
+      major_only_labels → إذا True، الأرقام على الحواف تظهر فقط عند خطوط "رئيسية" (مضاعفات label_every).
+    """
+    from PIL import Image, ImageDraw
+    img = base_img.copy()
+    draw = ImageDraw.Draw(img, "RGBA")
 
-    step_x = int(100 * sw / ow)
-    step_y = int(100 * sh / oh)
-    gc = (255, 255, 255, 40)
-    lc = (0, 255, 180, 210)
+    step_x = max(1, int(grid_step * sw / ow))
+    step_y = max(1, int(grid_step * sh / oh))
+    minor_color = (line_color[0], line_color[1], line_color[2], 35)
+    major_color = (line_color[0], line_color[1], line_color[2], 110)
+    text_color = line_color
 
-    x_sc, x_r = step_x, 100
+    x_sc, x_r = step_x, grid_step
+    x_majors = []
     while x_sc < sw:
-        draw.line([(x_sc, 0), (x_sc, sh)], fill=gc, width=1)
-        draw.rectangle([(x_sc+1, 2), (x_sc+34, 15)], fill=(0, 0, 0, 170))
-        draw.text((x_sc+2, 3), str(x_r), fill=lc)
-        x_sc += step_x; x_r += 100
-
-    y_sc, y_r = step_y, 100
+        is_major = (x_r % label_every == 0)
+        draw.line([(x_sc, 0), (x_sc, sh)], fill=(major_color if is_major else minor_color), width=1)
+        if is_major or not major_only_labels:
+            draw.rectangle([(x_sc+1, 2), (x_sc+34, 15)], fill=(0, 0, 0, 175))
+            draw.text((x_sc+2, 3), str(x_r), fill=text_color)
+        if is_major:
+            x_majors.append((x_sc, x_r))
+        x_sc += step_x; x_r += grid_step
+
+    y_sc, y_r = step_y, grid_step
+    y_majors = []
     while y_sc < sh:
-        draw.line([(0, y_sc), (sw, y_sc)], fill=gc, width=1)
-        draw.rectangle([(2, y_sc+1), (38, y_sc+14)], fill=(0, 0, 0, 170))
-        draw.text((3, y_sc+2), str(y_r), fill=lc)
-        y_sc += step_y; y_r += 100
+        is_major = (y_r % label_every == 0)
+        draw.line([(0, y_sc), (sw, y_sc)], fill=(major_color if is_major else minor_color), width=1)
+        if is_major or not major_only_labels:
+            draw.rectangle([(2, y_sc+1), (38, y_sc+14)], fill=(0, 0, 0, 175))
+            draw.text((3, y_sc+2), str(y_r), fill=text_color)
+        if is_major:
+            y_majors.append((y_sc, y_r))
+        y_sc += step_y; y_r += grid_step
+
+    # تسمية إحداثي (x,y) كاملة عند كل تقاطع "رئيسي" — تضمن رقماً حقيقياً قريباً من كل منطقة
+    for (xs, xr) in x_majors:
+        for (ys, yr) in y_majors:
+            label = f"{xr},{yr}"
+            tw = 6 * len(label) + 4
+            draw.rectangle([(xs+2, ys+2), (xs+2+tw, ys+13)], fill=(0, 0, 0, 150))
+            draw.text((xs+4, ys+2), label, fill=text_color)
 
     msx = int(mx * sw / ow)
     msy = int(my * sh / oh)
-    r = 11
-    draw.ellipse([(msx-r, msy-r), (msx+r, msy+r)], outline=(255, 50, 50, 240), width=2)
-    draw.line([(msx-18, msy), (msx+18, msy)], fill=(255, 50, 50, 200), width=1)
-    draw.line([(msx, msy-18), (msx, msy+18)], fill=(255, 50, 50, 200), width=1)
+    _draw_mouse_marker(draw, msx, msy, color=(line_color[0], line_color[1], line_color[2], 240))
 
-    final = grid_img.convert("RGB")
+    final = img.convert("RGB")
     draw2 = ImageDraw.Draw(final)
     draw2.rectangle([(0, 0), (sw, 20)], fill=(0, 0, 0))
-    draw2.text((4, 3), f"SCREEN {ow}x{oh} | MOUSE:({mx},{my}) | GRID=100px | DSP:{display}", fill=(0, 220, 160))
+    draw2.text((4, 3), f"SCREEN {ow}x{oh} | MOUSE:({mx},{my}) | GRID={grid_step}px | DSP:{display}", fill=(0, 220, 160))
     draw2.rectangle([(0, sh-20), (sw, sh)], fill=(0, 0, 0))
-    draw2.text((4, sh-17), "CLICK COORDS = numbers on grid lines (real screen pixels)", fill=(180, 180, 70))
+    draw2.text((4, sh-17), "CLICKCOORDS = numbers at every intersection (real screen pixels)", fill=(180, 180, 70))
+    return final
+
+
+def capture_with_grid(display: str, scale: float = 0.65, quality: int = 72,
+                      force_mx: int | None = None,
+                      force_my: int | None = None,
+                      grid_step: int = 50) -> dict:
+    """
+    يلتقط الشاشة من display محدد ويُنتج 4 نسخ من نفس اللقطة بالضبط (نفس اللحظة):
+      - "data"        → النسخة العادية (نظيفة تماماً) + علامة الماوس فقط، بدون أي Grid.
+                         هذه فقط تُعرض للمستخدم في الواجهة كـ "الشاشة الحقيقية".
+      - "data_grid"   → شبكة إحداثيات عادية (كل 50px)، أخضر/سماوي — للذكاء الاصطناعي.
+      - "data_grid2"  → شبكة إحداثيات أدق (كل 25px)، نفس الألوان — للذكاء الاصطناعي.
+      - "data_grid3"  → شبكة إحداثيات فائقة الدقة (كل 10px تقريباً)، باللون الأحمر — للذكاء الاصطناعي.
+    الثلاث نسخ الأخيرة كلها من نفس اللقطة الأصلية بالضبط (نفس اللحظة، لا التقاط متكرر)
+    لضمان تطابقها تماماً ولتفادي أي تأخير أو اختلاف بينها.
+    """
+    from PIL import Image, ImageDraw
 
-    buf = io.BytesIO()
-    final.save(buf, format="JPEG", quality=quality, optimize=True)
-    data = base64.b64encode(buf.getvalue()).decode()
+    img, ow, oh = _capture_raw(display)
+    if img is None:
+        return {"data": "", "data_grid": "", "data_grid2": "", "data_grid3": "",
+                "width": 1920, "height": 1080, "mouse_x": 0, "mouse_y": 0}
+
+    mx, my = (force_mx, force_my) if force_mx is not None else _get_mouse_pos(display)
 
-    return {"data": data, "width": ow, "height": oh, "mouse_x": mx, "mouse_y": my}
+    sw = int(ow * scale)
+    sh = int(oh * scale)
+    base_img = img.resize((sw, sh), Image.LANCZOS)
+    msx = int(mx * sw / ow)
+    msy = int(my * sh / oh)
+
+    # ── النسخة العادية النظيفة (بدون أي شبكة) — فقط علامة الماوس ─────────
+    clean_img = base_img.copy()
+    draw_clean = ImageDraw.Draw(clean_img, "RGBA")
+    _draw_mouse_marker(draw_clean, msx, msy)
+    clean_final = clean_img.convert("RGB")
+    buf_clean = io.BytesIO()
+    clean_final.save(buf_clean, format="JPEG", quality=quality, optimize=True)
+    data_clean = base64.b64encode(buf_clean.getvalue()).decode()
+
+    # ── نسخة شبكة عادية: كل 50px، أخضر/سماوي ────────────────────────────
+    grid1 = _render_grid_variant(base_img, ow, oh, sw, sh, mx, my, display,
+                                  grid_step=grid_step, line_color=(0, 255, 180, 235),
+                                  label_every=100)
+    buf1 = io.BytesIO(); grid1.save(buf1, format="JPEG", quality=quality, optimize=True)
+    data_grid1 = base64.b64encode(buf1.getvalue()).decode()
+
+    # ── نسخة شبكة أدق: كل 25px، نفس الألوان ──────────────────────────────
+    grid2 = _render_grid_variant(base_img, ow, oh, sw, sh, mx, my, display,
+                                  grid_step=25, line_color=(0, 255, 180, 235),
+                                  label_every=100)
+    buf2 = io.BytesIO(); grid2.save(buf2, format="JPEG", quality=quality, optimize=True)
+    data_grid2 = base64.b64encode(buf2.getvalue()).decode()
+
+    # ── نسخة شبكة فائقة الدقة: كل 10px تقريباً، أحمر بالكامل ────────────
+    grid3 = _render_grid_variant(base_img, ow, oh, sw, sh, mx, my, display,
+                                  grid_step=10, line_color=(255, 60, 60, 235),
+                                  label_every=50, major_only_labels=True)
+    buf3 = io.BytesIO(); grid3.save(buf3, format="JPEG", quality=max(quality, 78), optimize=True)
+    data_grid3 = base64.b64encode(buf3.getvalue()).decode()
+
+    return {
+        "data": data_clean,         # النسخة العادية النظيفة (تُعرض للمستخدم فقط)
+        "data_grid": data_grid1,    # شبكة عادية 50px (أخضر/سماوي)
+        "data_grid2": data_grid2,   # شبكة أدق 25px (أخضر/سماوي)
+        "data_grid3": data_grid3,   # شبكة فائقة الدقة 10px (أحمر)
+        "width": ow, "height": oh, "mouse_x": mx, "mouse_y": my,
+    }
 
 
 def _frame_hash(data: str) -> str:
@@ -925,6 +1010,9 @@ async def handle_action(ws: WebSocket, msg: dict, sess: dict):
                 await send({
                     "type": "screenshot",
                     "data": result["data"],
+                    "data_grid": result.get("data_grid", ""),
+                    "data_grid2": result.get("data_grid2", ""),
+                    "data_grid3": result.get("data_grid3", ""),
                     "ts": int(time.time() * 1000),
                     "auto": True, "label": label,
                     "screen_width": result["width"],
@@ -944,6 +1032,9 @@ async def handle_action(ws: WebSocket, msg: dict, sess: dict):
                 await send({
                     "type": "screenshot",
                     "data": result2["data"],
+                    "data_grid": result2.get("data_grid", ""),
+                    "data_grid2": result2.get("data_grid2", ""),
+                    "data_grid3": result2.get("data_grid3", ""),
                     "ts": int(time.time() * 1000),
                     "auto": True, "label": f"{label} (delayed)",
                     "screen_width": result2["width"],
@@ -963,6 +1054,9 @@ async def handle_action(ws: WebSocket, msg: dict, sess: dict):
         await send({
             "type": "screenshot",
             "data": result["data"],
+            "data_grid": result.get("data_grid", ""),
+            "data_grid2": result.get("data_grid2", ""),
+            "data_grid3": result.get("data_grid3", ""),
             "ts": int(time.time() * 1000),
             "auto": False, "label": label,
             "screen_width": result["width"],
@@ -1282,6 +1376,9 @@ async def websocket_endpoint(
             await ws.send_text(json.dumps({
                 "type": "screenshot",
                 "data": result["data"],
+                "data_grid": result.get("data_grid", ""),
+                "data_grid2": result.get("data_grid2", ""),
+                "data_grid3": result.get("data_grid3", ""),
                 "ts": int(time.time() * 1000),
                 "label": "Initial screen",
                 "screen_width": result["width"],
@@ -1326,6 +1423,9 @@ async def rest_screenshot(user_id: str = "anonymous"):
     result = await asyncio.to_thread(capture_with_grid, display, 0.7, 75)
     return JSONResponse({
         "image": result["data"],
+        "image_grid": result.get("data_grid", ""),
+        "image_grid2": result.get("data_grid2", ""),
+        "image_grid3": result.get("data_grid3", ""),
         "ts": int(time.time() * 1000),
         "screen_width": result["width"],
         "screen_height": result["height"],