MacOS Companion کے ساتھ ویب ایپس میں ایپل کے بنیادی ماڈل کو کیسے استعمال کریں۔

By /

تمام AI فنکشنز کے لیے کلاؤڈ ماڈل کی ضرورت نہیں ہوتی ہے جس میں فی ٹوکن بلنگ، نیٹ ورک راؤنڈ ٹرپس، اور آپ کے کمپیوٹر کو چھوڑنے والا ذاتی ڈیٹا ہوتا ہے۔ اگر آپ نیا میک استعمال کر رہے ہیں تو، معاون زبان کے ماڈل پہلے سے ہی ڈسک پر ہیں۔

بنیادی ماڈل بڑے پیمانے پر زبان کے ماڈلز کے ساتھ کام کرنے کے لیے ایپل کا سوئفٹ فریم ورک۔ یہ ایک آن ڈیوائس ماڈل ہے جو Apple Intelligence، Apple’s Private Cloud Compute، یا دوسرے فراہم کنندگان کے سرور ماڈلز کو کم کرتا ہے۔

یہ ٹیوٹوریل آن ڈیوائس ماڈل کو نشانہ بناتا ہے۔ جب آپ کوئی پیغام بھیجتے ہیں، تو یہ مقامی طور پر آپ کے میک کے اپنے ہارڈ ویئر پر چلتا ہے، فی کال مفت، اور آف لائن دوستانہ۔

جب ایپل ویژن کے ساتھ جوڑا بنایا جاتا ہے تو ڈیوائس پر موجود تصاویر کو پڑھنے کے لیے، یہ آپ کے کمپیوٹر کو چھوڑے بغیر ڈیٹا کے خلاصہ، درجہ بندی، اور ساختی نکالنے جیسے حقیقی دنیا کے AI فنکشنز بنانے کے لیے کافی ہے۔

انڈیکس

کیا تعمیر کرنا ہے

تم تعمیر کرو وژن برجایک ویب ایپ جو آپ کے مقامی macOS ساتھی کو تصاویر بھیجتی ہے۔ ساتھی Apple Vision کے ساتھ ایک تصویر پڑھتا ہے، فاؤنڈیشن ماڈلز کے ساتھ تصویر کے بارے میں اندازہ لگاتا ہے، اور براؤزر میں ساختہ JSON واپس کرتا ہے۔ ایک باقاعدہ ویب انٹرفیس کے پیچھے ذاتی، آن ڈیوائس AI۔

آپ اس GitHub ذخیرہ میں مکمل سورس کوڈ تلاش کر سکتے ہیں: github.com/03balogun/vision-bridge۔

مقصد ایک بہت بڑا پروڈکٹ بنانا نہیں ہے، بلکہ اس کے کام کرنے کے پیچھے فن تعمیر کو سمجھنا ہے۔

ویژن برج دو حصوں پر مشتمل ہے:

React ایپس میں شامل ہیں:

macOS ساتھی ایپس میں شامل ہیں:

آخری جواب یہ ہے:

{
  "support": {
    "visionAvailable": true,
    "foundationModelAvailable": true,
    "foundationModelStatus": "available"
  },
  "image": {
    "filename": "screenshot.png",
    "contentType": "image/png",
    "byteCount": 1048576,
    "width": 1440,
    "height": 900
  },
  "vision": {
    "detectedText": [
      {
        "text": "Build failed",
        "confidence": 0.96,
        "boundingBox": {
          "x": 0.12,
          "y": 0.31,
          "width": 0.45,
          "height": 0.08
        }
      }
    ]
  },
  "model": {
    "summary": "The image appears to show a software build failure.",
    "description": "A developer tool window is showing an error state with diagnostic text.",
    "suggestedTags": ["screenshot", "developer-tool", "error"],
    "possibleUses": [
      "Generate alt text",
      "Summarize screenshots",
      "Extract document data"
    ]
  }
}

شرائط

پیروی کرنے کے لیے آپ کو ضرورت ہو گی:

فاؤنڈیشن ماڈلز کی دستیابی آپ کے Mac، OS ورژن، اور Apple Intelligence کی ترتیبات کے لحاظ سے مختلف ہوتی ہے۔ ساتھی اسے رن ٹائم پر چیک کرتا ہے، جس کا ہم ذیل میں احاطہ کریں گے۔

آپ کو macOS ساتھی ایپ کی ضرورت کیوں ہے۔

ایک باقاعدہ React ایپ میں، آپ کچھ اس طرح نہیں لکھ سکتے:

import FoundationModels from "apple-frameworks";

وہ API براؤزرز میں موجود نہیں ہے۔ تاہم، مقامی macOS ایپس ایپل کے کسی بھی فریم ورک کو استعمال کر سکتی ہیں، لہذا ساتھی ایپ مقامی پل کے طور پر کام کرتی ہے۔ یہی طرز کسی بھی مقامی فعالیت پر لاگو ہوتا ہے جسے ویب پلیٹ فارم بے نقاب نہیں کرتا ہے۔

بنیادی ماڈل تصاویر کو براہ راست نہیں پڑھ سکتا۔

عام فاؤنڈیشن ماڈلز کا فریم ورک ایک لینگویج ماڈل انٹرفیس ہے۔ یہ ٹیوٹوریل ماڈل کو تصاویر نہیں بھیجتا ہے کیونکہ یہ فی الحال ملٹی موڈل کلاؤڈ ماڈل کی طرح براہ راست تصویری ان پٹ کو ظاہر نہیں کرتا ہے۔ اس کے بجائے، Companion آپ کے اشارے میں Vision OCR مشاہدات اور تصویری میٹا ڈیٹا فراہم کرتا ہے۔ ماڈل خام پکسلز کے بجائے ساختی متن پر غور کرتا ہے۔

یہ تقسیم ہر فریم ورک کی طاقت کا فائدہ اٹھاتی ہے۔ تصویروں سے مشین کے ذریعے پڑھنے کے قابل معلومات نکالنے میں وژن بہترین ہے، اور فاؤنڈیشن ماڈلز اس معلومات کو خلاصوں، لیبلز، وضاحتوں، اور ساختی آؤٹ پٹ میں بدل دیتے ہیں۔

ویژن برج آرکیٹیکچر: براؤزر لوکل ہوسٹ کے ذریعے Apple Vision OCR چلانے والے ایک سوئفٹ ساتھی کو تصاویر بھیجتا ہے، فاؤنڈیشن ماڈلز کو مشاہدات فیڈ کرتا ہے، اور ساختی JSON واپس کرتا ہے۔

اوپر والا خاکہ اس راؤنڈ ٹرپ کو دکھاتا ہے جسے ہم اس ٹیوٹوریل کے بقیہ حصے میں بنائیں گے۔ براؤزر اپ لوڈ کردہ تصویر کو Swift ساتھی کو base64 JSON کے طور پر لوکل ہوسٹ کے ذریعے بھیجتا ہے۔ Companion کے اندر، Apple Vision تصویروں پر OCR چلاتا ہے اور متنی مشاہدات جیسے کہ تسلیم شدہ تار، اعتماد کے اسکور، اور باؤنڈنگ بکس تیار کرتا ہے۔

یہ مشاہدات، خود تصاویر کے بجائے، بنیادی ماڈل کے لیے اشارے کے طور پر فارمیٹ کیے جاتے ہیں، جو خلاصے، وضاحتیں، اور ٹیگز تیار کرتے ہیں۔ ساتھی پھر ویژن آؤٹ پٹ اور ماڈل آؤٹ پٹ کو ایک واحد JSON جواب میں بنڈل کرتا ہے اور اسے براؤزر میں واپس کرتا ہے۔

منصوبے کی ساخت

مندرجہ ذیل ڈھانچے کے ساتھ ایک پروجیکٹ بنائیں:

vision-bridge/
  apps/
    web/
      src/
        main.tsx
        styles.css
      package.json
      vite.config.ts
    macos-companion/
      Package.swift
      Sources/
        VisionBridgeCompanion/
          main.swift
  package.json
  README.md

جڑ package.json کئی آسان احکامات فراہم کرتا ہے:

{
  "scripts": {
    "dev": "npm --workspace apps/web run dev",
    "build": "npm --workspace apps/web run build",
    "companion": "swift run --package-path apps/macos-companion VisionBridgeCompanion"
  },
  "workspaces": ["apps/web"]
}

ایک React ایپ بنانا

ویب ایپ جان بوجھ کر آسان ہے۔ یہاں ایک کام ہے۔ خیال یہ ہے کہ صارف ایک تصویر منتخب کرے اور ساتھی کے ذریعہ واپس کردہ JSON کو ظاہر کرے۔

ویب ایپ Vite، React، Lucide شبیہیں، اور JSON ویور کا استعمال کرتی ہے۔

{
  "dependencies": {
    "@vitejs/plugin-react": "^6.0.3",
    "lucide-react": "^0.468.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-json-view-lite": "^2.5.0",
    "vite": "^8.1.3"
  }
}

انحصار کی وضاحت کرنے کے بعد، انہیں انسٹال کریں۔

npm install

API کا بنیادی URL مقامی ساتھی کی طرف اشارہ کرتا ہے۔

const API_BASE_URL = "http://127.0.0.1:43119";

ساتھی کی صحت کی جانچ

ویب ایپ UI میں یہ بتانے کے لیے ساتھی کو پنگ کر سکتی ہے کہ آیا مقامی پل آن لائن ہے۔

async function checkHealth() {
  setHealthError(null);

  try {
    const response = await fetch(`${API_BASE_URL}/v1/health`);
    if (!response.ok) {
      throw new Error(`Health check failed with ${response.status}`);
    }

    const payload = await response.json();
    setHealth(payload);
  } catch (error) {
    setHealth(null);
    setHealthError(error instanceof Error ? error.message : "Companion unavailable");
  }
}

ساتھی آن لائن اسٹیٹس گولی کا اسکرین شاٹ

تصویر کو بیس 64 میں تبدیل کریں۔

جب صارف کسی فائل کو منتخب کرتا ہے، تو ایپ اسے بیس 64 میں تبدیل کر دیتی ہے تاکہ اسے JSON کے طور پر بھیجا جا سکے۔

function readFileAsBase64(file: File) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      const result = String(reader.result);
      resolve(result.includes(",") ? result.split(",")[1] : result);
    };
    reader.onerror = () => reject(reader.error);
    reader.readAsDataURL(file);
  });
}

فائلوں کو اپ لوڈ کرنے کا یہ واحد طریقہ نہیں ہے۔ آپ بھی استعمال کر سکتے ہیں multipart/form-dataتاہم، JSON ڈیمو کو معائنہ کرنے میں آسان رکھتا ہے۔

اپ لوڈ کے بعد فوری تجزیہ

تصویر اپ لوڈ ہوتے ہی ایپ اس کا تجزیہ کرنا شروع کر دیتی ہے۔

async function handleFile(file: File) {
  if (!file.type.startsWith("image/")) {
    setError("Choose a PNG, JPEG, HEIC, or another browser-readable image.");
    return;
  }

  const base64 = await readFileAsBase64(file);
  const nextImage = {
    file,
    previewUrl: URL.createObjectURL(file),
    base64,
  };

  setSelectedImage(nextImage);
  setAnalysis(null);
  setError(null);
  setCopied(false);

  analyzeImage(nextImage);
}

handleFile تمام نئی تصاویر کے لیے تیاری کا کام انجام دیں۔ یہ کسی بھی ایسی چیز کو مسترد کرتا ہے جو براؤزر کے پڑھنے کے قابل تصویر نہیں ہے، فائل کو بیس 64 میں تبدیل کرتا ہے، اور ایک واحد آبجیکٹ بناتا ہے جس میں باقی بہاؤ کے لیے درکار ہر چیز ہوتی ہے: ذریعہ۔ File (نام اور MIME قسم کے لیے)، پیش نظارہ کے لیے آبجیکٹ URL، اور API کالز کے لیے base64 پے لوڈ۔

اس کے بعد یہ پچھلی رن سے پرانے تجزیہ، غلطی کے پیغامات، اور "کاپی شدہ” اشارے کو صاف کرتا ہے، جس سے UI کو نئی تصویر کے ساتھ والی آخری تصویر سے نتائج دکھانے سے روکتا ہے۔ آخر میں، یہ شروع ہوتا ہے analyzeImage(nextImage) فوری طور پر

نوٹ کریں کہ یہ آبجیکٹ پر بھروسہ کرنے کے بجائے براہ راست ایک نیا آبجیکٹ پاس کرتا ہے۔ selectedImage ریاست: ری ایکٹ اسٹیٹ اپ ڈیٹس اگلے رینڈر تک اثر انداز نہیں ہوتے ہیں، لہذا اگر آپ ریاست کو یہاں پڑھتے ہیں تو یہ اب بھی ہوگا پچھلے ویڈیو

کہ Analyze بٹن اب بھی UI میں موجود ہے، لیکن دستی دوبارہ لانچ کرنے والے بٹن کے طور پر کام کرتا ہے۔

تصویر اپنے ساتھی کو بھیجیں۔

بنیادی درخواستیں ہیں:

const analysisRequestId = useRef(0);

async function analyzeImage(image = selectedImage) {
  if (!image) {
    setError("Choose an image first.");
    return;
  }

  const requestId = analysisRequestId.current + 1;
  analysisRequestId.current = requestId;

  setRequestState("loading");
  setError(null);
  setCopied(false);

  try {
    const response = await fetch(`${API_BASE_URL}/v1/analyze-image`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        filename: image.file.name,
        mimeType: image.file.type || "application/octet-stream",
        base64: image.base64,
      }),
    });

    const payload = await response.json();

    if (requestId !== analysisRequestId.current) {
      return;
    }

    if (!response.ok) {
      throw new Error(payload.error?.message ?? `Analysis failed with ${response.status}`);
    }

    setAnalysis(payload);
    setRequestState("success");
  } catch (error) {
    if (requestId !== analysisRequestId.current) {
      return;
    }

    setRequestState("error");
    setError(error instanceof Error ? error.message : "Could not analyze image");
  }
}

یہ خصوصیت مکمل طور پر پل کے کلائنٹ کی طرف ہے۔ بدل جاتا ہے requestState کو loading (اسپنر چلاتا ہے اور بٹن کو غیر فعال کرتا ہے) پھر POST کو /v1/analyze-image میرے پاس JSON باڈی ہے جس میں تین فیلڈز ہیں: فائل کا نام، MIME قسم، اور base64 امیج ڈیٹا۔ جسم کو ون ٹو ون میپ کیا گیا ہے۔ AnalyzeImageRequest ہم بعد میں سوئفٹ ساتھی ڈی کوڈنگ کی ساخت بنائیں گے۔

براہ کرم نوٹ کریں کہ جواب کو JSON کے طور پر پارس کیا گیا ہے۔ پہلے چیک کر رہا ہے۔ response.ok. یہ جان بوجھ کر ہے۔ اگر ساتھی درخواست کو مسترد کرتا ہے (غلط بیس 64، بڑی تصویر)، تو یہ پھر بھی JSON باڈی واپس کر دے گا۔ error.message فیلڈز کا استعمال کرتے ہوئے، UI عام اسٹیٹس کوڈ کے بجائے ساتھی کی اپنی تفصیل ظاہر کر سکتا ہے۔ اگر کامیاب ہوتا ہے تو، پے لوڈ براہ راست ریاست میں منتقل ہوتا ہے اور JSON ناظر کو نتائج کے ساتھ دوبارہ پیش کیا جاتا ہے۔

کہ requestId لیجر باسی ردعمل کو روکتا ہے۔ اگر صارف پہلی تصویر کا تجزیہ کرنے کے دوران دوسری تصویر اپ لوڈ کرتا ہے، تو درخواست مکمل ہو جاتی ہے۔ آخری آپ جیت جائیں گے، اور OCR پلس ماڈل جنریشن میں کافی وقت لگتا ہے کہ جوابات حقیقت سے باہر پہنچ سکتے ہیں۔ لہذا ہر کال ایک حوالہ میں ذخیرہ شدہ کاؤنٹر کو بڑھاتی ہے اور اس کی اپنی ID یاد رکھتی ہے۔

جب سے awaitچیک کریں کہ آیا آپ کی درخواست ابھی بھی موجودہ ہے۔ اگر اس دوران کوئی نیا اپ لوڈ شروع ہوتا ہے، تو تصویر کے تازہ ترین نتائج کو اوور رائٹ کرنے کے بجائے پرانا جواب خود بخود حذف ہو جائے گا۔ وہی چیک چلتا ہے: catch اس لیے پرانی ناکامیاں نئی ​​کامیابیوں کی راہ میں حائل نہیں ہو سکتیں۔ اگر آپ نتائج کو نظر انداز کرنے کے بجائے جاری HTTP درخواستوں کو بھی منسوخ کرنا چاہتے ہیں۔ AbortController یہ ایک قدرتی اگلا قدم ہے۔

JSON آؤٹ پٹ رینڈرنگ

آؤٹ پٹ ونڈو میں، استعمال کریں: react-json-view-lite:

ایک macOS ساتھی ایپ بنانا

ساتھی ایک سوئفٹ کمانڈ لائن ایپ ہے۔ یہ ایک چھوٹے سے مقامی HTTP API کو بے نقاب کرتا ہے۔

اگر آپ ویب سائڈ سے آرہے ہیں تو نقشہ سازی آسان ہے۔ Swift Package Manager Swift کے لیے npm ہے۔ Package.swift اس کا package.jsonاور swift run اس کا npm start. یہ ایکس کوڈ کے ساتھ آتا ہے، لہذا انسٹال کرنے کے لیے کوئی اضافی چیز نہیں ہے۔

کہ Package.swift فائلیں ہیں:

// swift-tools-version: 6.0

import PackageDescription

let package = Package(
    name: "VisionBridgeCompanion",
    platforms: [
        .macOS("26.0")
    ],
    products: [
        .executable(
            name: "VisionBridgeCompanion",
            targets: ["VisionBridgeCompanion"]
        )
    ],
    targets: [
        .executableTarget(
            name: "VisionBridgeCompanion"
        )
    ]
)

ساتھی ایپل کے ضروری فریم ورک درآمد کرتا ہے۔

import Foundation
import FoundationModels
import ImageIO
import Network
import Vision

یہ سنتا ہے 127.0.0.1:43119:

private let defaultPort: UInt16 = 43119

ایپ دو راستوں کو بے نقاب کرتی ہے:

switch (request.method, request.path) {
case ("GET", "/v1/health"):
    let health = HealthResponse(support: ModelSupport.current)
    return try json(health)

case ("POST", "/v1/analyze-image"):
    let payload = try JSONDecoder().decode(AnalyzeImageRequest.self, from: request.body)
    let response = try await service.analyze(payload)
    return try json(response)

default:
    return try json(
        ErrorResponse(error: APIErrorPayload(message: "Route not found")),
        status: .notFound
    )
}

یہ switch ساتھی کی پوری روٹنگ پرت۔ کوئی ویب فریم ورک نہیں ہے، صرف طریقوں اور راستوں کا نمونہ ملاپ ہے۔

دونوں راستے صفائی سے کام کو تقسیم کرتے ہیں۔

  • GET /v1/health یہ صرف پڑھنے کے لیے سستا راستہ ہے۔ یہ کوئی تجزیہ نہیں چلاتا۔ یہ صرف یہ بتاتا ہے کہ آیا اس میک پر ویژن اور فاؤنڈیشن ماڈل بذریعہ دستیاب ہیں: ModelSupport.current (اگلے حصے میں احاطہ کرتا ہے)۔ React ایپس اسے آن لوڈ پر آن لائن/آف لائن اسٹیٹس کی گولی پیش کرنے کے لیے کال کرتی ہیں، تاکہ صارفین کو معلوم ہو جائے کہ پل کام کر رہا ہے اس سے پہلے کہ وہ کچھ بھی اپ لوڈ کریں۔

  • POST /v1/analyze-image یہیں سے اصل کام ہوتا ہے۔ درخواست کے جسم کو اس طرح ڈی کوڈ کریں: AnalyzeImageRequest (ایک ہی filename، mimeTypeاور base64 فیلڈز براؤزر سے بھیجے جاتے ہیں) اور تجزیہ سروس کو بھیجے جاتے ہیں۔ اس کے بعد تصویر کی توثیق کی جاتی ہے، ویژن OCR چلایا جاتا ہے، بنیادی ماڈل ظاہر ہوتا ہے، اور مشترکہ نتائج واپس کیے جاتے ہیں۔ کہ try await یہاں اہم بات: تجزیہ غیر مطابقت پذیر ہے اور راستہ اسے سیریلائز کرنے سے پہلے صرف جواب کا انتظار کرتا ہے۔

باقی سب کچھ JSON 404 سے تعلق رکھتا ہے، لہذا یہاں تک کہ اگر یہ نامعلوم راستہ ہے، براؤزر اسی فارمیٹ میں جواب دے گا جسے وہ پہلے سے جانتا ہے کہ کس طرح تجزیہ کرنا ہے۔

غلطیاں اسی طرح کام کرتی ہیں۔ جو خرابیاں ہوتی ہیں وہ ایک جگہ پکڑی جاتی ہیں اور مناسب اسٹیٹس کوڈ کے ساتھ JSON ایرر رسپانس میں تبدیل ہوجاتی ہیں۔ یہ بالکل ویب ایپ کا کوڈ ہے۔ payload.error?.message چیک کریں کہ آپ کیا پڑھتے ہیں۔

ایک عملی تفصیل: چونکہ براؤزر ساتھی کو دوسرے اصل (وائٹ ڈیولپمنٹ سرور) سے کال کرتا ہے، اس لیے ہر جواب میں CORS ہیڈر بھی ہوتا ہے، اور راؤٹر پرواز سے پہلے جواب دیتا ہے۔ OPTIONS خالی درخواست 204. بصورت دیگر آپ کا براؤزر بلاک کر دے گا: fetch اس راستے تک پہنچنے سے پہلے۔

بیس ماڈل کی دستیابی کو چیک کریں۔

صحابہ کو یہ خیال نہیں کرنا چاہئے کہ ایک ماڈل دستیاب ہے. پہلے اسے چیک کریں:

private struct ModelSupport: Encodable {
    let visionAvailable: Bool
    let foundationModelAvailable: Bool
    let foundationModelStatus: String

    static var current: ModelSupport {
        let model = SystemLanguageModel.default

        switch model.availability {
        case .available:
            return ModelSupport(
                visionAvailable: true,
                foundationModelAvailable: true,
                foundationModelStatus: "available"
            )

        case .unavailable(let reason):
            return ModelSupport(
                visionAvailable: true,
                foundationModelAvailable: false,
                foundationModelStatus: "unavailable.(reason.description)"
            )

        @unknown default:
            return ModelSupport(
                visionAvailable: true,
                foundationModelAvailable: false,
                foundationModelStatus: "unavailable.unknown"
            )
        }
    }
}

ہو سکتا ہے صارف غیر تعاون یافتہ میک استعمال کر رہا ہو، ایپل انٹیلی جنس غیر فعال ہو سکتی ہے، یا ہو سکتا ہے کہ ماڈل ابھی تیار نہ ہو۔ جواب براؤزر کو بتاتا ہے کہ کس کیس پر کارروائی ہو رہی ہے۔

ساتھی بیس 64 امیج کو ڈی کوڈ کرتا ہے، میٹا ڈیٹا کی تصدیق کرتا ہے، اور پھر Vision OCR چلاتا ہے۔

متن کی شناخت کا بہاؤ مندرجہ ذیل ہے:

private func recognizeText(in imageData: Data) async throws -> [DetectedText] {
    var request = RecognizeTextRequest()
    request.recognitionLevel = .accurate
    request.automaticallyDetectsLanguage = true
    request.usesLanguageCorrection = true

    let observations = try await request.perform(on: imageData)

    var detectedText: [DetectedText] = []

    for observation in observations {
        guard let candidate = observation.topCandidates(1).first else {
            continue
        }

        let bounds = NormalizedBox.from(points: [
            observation.topLeft,
            observation.topRight,
            observation.bottomRight,
            observation.bottomLeft
        ])

        detectedText.append(DetectedText(
            text: candidate.string,
            confidence: Double(candidate.confidence),
            boundingBox: bounds
        ))
    }

    return detectedText
}

وژن منظم مشاہدہ فراہم کرتا ہے۔

یہ مشاہدات ماڈل کے لیے سیاق و سباق بن جاتے ہیں۔

وژن کے نتائج کی وضاحت کے لیے بیس ماڈل سے پوچھیں۔

ساتھی اب تصویری میٹا ڈیٹا اور OCR نتائج سے اشارے تیار کرتا ہے۔

ہدایات کو چیک کریں.

You cannot see the original image. Use only the metadata and OCR observations below.

یہ ماڈل کو ایماندار رکھتا ہے۔ آپ کو ایسے پکسلز دیکھنے کا بہانہ نہیں کرنا چاہیے جو وہاں نہیں ہیں۔

پرامپٹ اس طرح لگتا ہے:

let textPreview = detectedText
    .prefix(30)
    .map { "- ($0.text) (confidence: (String(format: "%.2f", $0.confidence)))" }
    .joined(separator: "n")

let prompt = """
You are summarizing Apple Vision OCR output for a developer tool named Vision Bridge.
You cannot see the original image. Use only the metadata and OCR observations below.

Image:
- filename: (image.filename)
- content type: (image.contentType)
- size: (image.width ?? 0)x(image.height ?? 0)

OCR observations:
(textPreview.isEmpty ? "- No text detected." : textPreview)

Return a compact JSON object with these exact keys:
summary: one sentence
description: one short paragraph
suggestedTags: 3 to 6 short tags
possibleUses: 3 to 5 practical use cases for this kind of image analysis
"""

پھر ہم ماڈل کو کہتے ہیں:

let session = LanguageModelSession(
    model: .default,
    instructions: "Return valid JSON only. Do not include Markdown fences."
)

let response = try await session.respond(to: prompt)
let raw = response.content.trimmingCharacters(in: .whitespacesAndNewlines)

ہمیشہ آؤٹ پٹ کی توثیق کریں، چاہے آپ JSON کی درخواست کر رہے ہوں۔ ماڈل اب بھی مارک ڈاون باڑ یا خراب متن واپس کر سکتا ہے۔ نمونہ ایپ ایک سادہ مارک ڈاؤن کوڈ کی باڑ کو ہٹا دیتی ہے اور اگر تجزیہ ناکام ہو جاتی ہے تو اسے خام جواب سے بدل دیتی ہے۔

JSON کو براؤزر پر لوٹائیں۔

ساتھی سپورٹ اسٹیٹس، امیج میٹا ڈیٹا، ویژن کے نتائج، اور ماڈل آؤٹ پٹ کو یکجا کرتے ہیں۔

return AnalyzeImageResponse(
    support: support,
    image: metadata,
    vision: VisionPayload(detectedText: detectedText),
    model: modelInsight
)

براؤزر کو یہ جاننے کی ضرورت نہیں ہے کہ وژن یا فاؤنڈیشن ماڈل کیسے کام کرتے ہیں۔ یہ صرف JSON وصول کرتا ہے۔ مقامی ایپس بنیادی فعالیت کی مالک ہیں اور ویب ایپس انٹرفیس کی مالک ہیں۔

کیونکہ چار بلاکس ایک ہی قسم کے ڈیٹا نہیں ہیں، اس لیے یہ سوچنے کے لیے ایک لمحہ لینے کے قابل ہے کہ ہر بلاک اصل میں کیا فراہم کرتا ہے۔

  • support ہم آپ کو دکھائیں گے کہ اس میک کے ساتھ کیا ممکن ہے۔ اگر foundationModelAvailable ہے false، model بلاک اب بھی موجود ہے، لیکن اس میں اصل تجزیہ کے بجائے ایک متبادل پیغام ہے، اور foundationModelStatus ایک تار، جیسے unavailable.appleIntelligenceNotEnabled) UI کو مطلع کرتا ہے۔ کیوںلہٰذا خاموشی سے انحطاط کے بجائے اس کی وضاحت کی جا سکتی ہے۔

  • image یہ فائل کے میٹا ڈیٹا اور ماپے ہوئے پکسل کے طول و عرض کی بازگشت کرتا ہے۔ یہ عقل کی جانچ کے لیے مفید ہے، اور آپ کو وژن کے نتائج کے ساتھ مقامی آپریشنز کرنے کے لیے چوڑائی اور اونچائی کی ضرورت ہوگی۔

  • vision سچ ہے ہر ایک شے ہے۔ detectedText یہ وہ سٹرنگ ہے جسے وژن نے حقیقت میں پایا، 0 اور 1 کے درمیان اعتماد کے اسکور اور ایک نارملائزڈ باؤنڈنگ باکس کا استعمال کرتے ہوئے (تصویری سائز کے ایک حصے کے طور پر ظاہر کردہ نقاط)۔ x: 0.12, width: 0.45 اس کا مطلب ہے "بائیں سے 12% شروع کرنا اور چوڑائی کے 45% تک پھیلا ہوا ہے۔” خانوں کو نارملائز کیا جاتا ہے، لہذا آپ کسی بھی ڈسپلے سائز پر پیش نظارہ میں نمایاں اوورلے بنانے کے لیے پیش کردہ سائز کو ضرب دے سکتے ہیں۔ کم بھروسہ والی اشیاء پر بھروسہ کرنے سے پہلے ان کو فلٹر کرنے یا جھنڈا لگانے پر غور کریں۔

  • model یہ ایک تعبیر ہے، مشاہدہ نہیں۔ کہ summary، description، suggestedTagsاور possibleUses فیلڈز OCR ٹیکسٹ کے لینگویج ماڈل سے تیار ہوتے ہیں۔ یہ متبادل متن، کیپشنز، یا ٹیگ کی تجاویز کے طور پر مفید ہے، لیکن یہ OCR سے غائب ہر چیز کو وراثت میں ملتا ہے اور اسے حقیقت کے بجائے ایک مسودہ سمجھا جانا چاہیے۔ اگر آپ کے ماڈل کے آؤٹ پٹ کو JSON کے بطور پارس نہیں کیا جا سکتا ہے۔ rawResponse یہ غیر تجزیہ شدہ متن کو پاس کرتا ہے، لہذا کچھ بھی ضائع نہیں ہوتا ہے۔

ناکام تعمیر کے اسکرین شاٹ کے لیے، ماڈل بلاک اس طرح واپس آسکتا ہے:

{
  "model": {
    "summary": "The image appears to show a software build failure.",
    "description": "A developer tool window is showing an error state with diagnostic text.",
    "suggestedTags": ["screenshot", "developer-tool", "error"],
    "possibleUses": [
      "Generate alt text",
      "Summarize screenshots",
      "Extract document data"
    ]
  }
}

یہ مجموعہ (وژن میں مقامات کے ساتھ درست متن اور ماڈل سے انسانی پڑھنے کے قابل تشریح) تلاش کے قابل اسکرین شاٹس کی لائبریری کے اوپر حقیقی فعالیت بنانے کے لیے کافی ہے جس کے ذریعے ترتیب دیا گیا ہے: detectedText اور suggestedTagsاپ لوڈ کردہ امیجز کے لیے خودکار Alt ٹیکسٹ یا باؤنڈنگ باکسز کے ذریعے چلائے جانے والے اوورلیز پر کلک کریں۔

اور چونکہ پرامپٹ ساتھی میں ہے، اس لیے جو واپس کیا گیا ہے اسے تبدیل کرنا (جیسے اسکرین شاٹ کو ٹیگ کرنے کے بجائے رسید سے آئٹمز نکالنا) پرامپٹ میں ترمیم ہے، فن تعمیر میں تبدیلی نہیں۔

ایپ چلائیں

ساتھی شروع کریں۔

npm run companion

ویب ایپ کو دوسرے ٹرمینل میں شروع کریں۔

npm run dev

Vite URL کھولیں:

http://127.0.0.1:5173

اگر وہ بندرگاہ استعمال میں ہے، تو Vite ایک مختلف بندرگاہ کا انتخاب کرے گا۔

آپ کا ساتھی درج ذیل مقام پر ہونا چاہیے:

http://127.0.0.1:43119

آپ خود اس کی جانچ کر سکتے ہیں۔

curl http://127.0.0.1:43119/v1/health

متوقع جواب:

{
  "app": "Vision Bridge Companion",
  "ok": true,
  "support": {
    "foundationModelAvailable": true,
    "foundationModelStatus": "available",
    "visionAvailable": true
  },
  "version": "0.1.0"
}

ٹرمینل چلانے والے ساتھی کا اسکرین شاٹ

نتیجہ

اب ہمارے پاس تصاویر اپ لوڈ کرنے کے لیے ایک React انٹرفیس ہے، ایپل پر مبنی فریم ورک کے ساتھ امیجز کا تجزیہ کرنے کے لیے ایک Swift ساتھی، اور ان کے درمیان بہنے والا JSON ہے۔

وژن برج جان بوجھ کر چھوٹا ہے، لیکن یہ پل خود دوبارہ قابل استعمال ہے۔ ایک بھروسہ مند ڈیفالٹ ساتھی کے ساتھ، آپ کی ویب ایپ ریموٹ ماڈلز کو پرامپٹ بھیجنے سے زیادہ کام کر سکتی ہے۔ آپ اپنے میک سے مقامی سیاق و سباق کے ساتھ کام کرنے، ایپل فریم ورک استعمال کرنے، اور سٹرکچرڈ ڈیٹا واپس کرنے کے لیے کہہ سکتے ہیں جسے براؤزر رینڈر، اسٹور، یا سنکرونائز کر سکتا ہے۔

وسائل

Related Posts

Scroll to Top