M×S

MarkIt × Screenshot-to-Code Studio

Tài liệu → Markdown  ·  Ảnh chụp → Code chạy được

Microsoft MarkItDown …

Chạy 100% trên máy bạn với PDF/Office/HTML/CSV. Ảnh & slide chỉ cần OCR khi bạn bật LLM.

…
📥
Kéo–thả file vào đây hoặc bấm để chọn · nhiều file cùng lúc · Ctrl+V để dán ảnh PDF · DOCX · PPTX · XLSX · CSV · JSON · XML · HTML · EPub · ZIP · ảnh · audio
    File mẫu:
    🧾

    Chưa có kết quả. Chọn file bên trái rồi bấm Chuyển đổi.

    Screenshot → Code

    Engine prompt chuyển thể từ abi/screenshot-to-code: ảnh thiết kế / ảnh chụp màn hình → trang web chạy được ngay.

    🖼️
    Thả ảnh giao diện vào đây Ctrl+V dán từ clipboard · nhiều ảnh = nhiều màn hình
      🪄

      Chưa có code. Tải ảnh lên rồi bấm Sinh code.

      📌 Sổ tay Repo

      Ghi lại những repo hay ho / sẽ dùng lại: vì sao lưu, dùng khi nào, cài thế nào. Lưu tại data/repos.json — nhập tay hoàn toàn, không gọi model, không tốn token.

      Đang tải…

      Lịch sử

      Markdown và code đã tạo, lưu tại data/history.json.

      🔌 Kết nối model AI

      1. Bấm chip provider ở góc phải (hoặc nút bên dưới) để mở bảng cấu hình.
      2. Chọn provider: OpenAI / Gemini / Claude / OpenRouter / Ollama (miễn phí, local).
      3. Dán API key → Lưu → Test kết nối.

      Không có key vẫn dùng được: mọi tính năng MarkItDown (PDF, Office, HTML, CSV…) chạy offline. Chỉ OCR ảnh và sinh code cần model.

      🧩 Hai dự án được tích hợp

      microsoft/markitdown — Python package chuyển mọi định dạng sang Markdown, dùng làm engine chính cho tab Tài liệu → Markdown (kể cả OCR ảnh qua llm_client).

      abi/screenshot-to-code — hệ prompt biến ảnh thành code, được chuyển thể vào tab Ảnh → Code (giữ nguyên system prompt, chỉ dẫn theo stack, quy tắc nhiều ảnh, cơ chế chỉnh sửa theo hội thoại).

      Cầu nối giữa hai luồng: Markdown trích từ tài liệu có thể dán thẳng vào khung ghi chú để model dựng lại trang đúng nội dung thật.

      📌 Sổ tay Repo là gì?

      Tab Sổ tay Repo là cuốn sổ ghi lại các repo bạn muốn dùng lại: mỗi repo lưu link, mô tả, tag, trạng thái (ý tưởng → muốn thử → đang dùng) và lệnh cài nhanh. Tên repo tự trích từ link — chỉ cần dán URL, không phải đặt tên.

      1. Bấm ＋ Thêm repo, dán URL — tên repo tự suy ra từ link.
      2. Đánh tag + trạng thái để lọc lại sau này (tìm được cả khi gõ không dấu).
      3. Bấm ★ để ghim repo quan trọng lên đầu danh sách.

      Dữ liệu nằm ở data/repos.json (cùng chỗ với lịch sử và sổ token), xuất/nhập được qua .md và .json. Nhập tay hoàn toàn — không tốn token, chạy offline.

      📊 Token đã sử dụng

      Mỗi lần OCR ảnh/PDF scan hoặc sinh code đều được ghi lại ở đây: bao nhiêu token vào/ra, ảnh nào, model nào, hết bao lâu và ước tính bao nhiêu tiền.

      Đang tải…

      📚 Định dạng MarkItDown hỗ trợ

      ⌨️ Phím tắt & mẹo

      • Ctrl+V dán ảnh từ clipboard vào cả hai tab.
      • Ở tab Ảnh → Code: bấm So sánh ảnh để đối chiếu kết quả với thiết kế gốc.
      • Lỗi thường gặp: 401 = sai key, 404 = sai base URL/model, 429 = hết hạn mức.
      • Model local nên dùng bản vision ≥ 7B (qwen2.5vl, gemma3) để đọc layout chính xác hơn.