API (Python) کے ساتھ ایک پرامپٹ سے HTML ٹول بنائیں

ایک API کال سے آپ کام کرنے والا سنگل فائل ٹول حاصل کر سکتے ہیں: ایک اچھی ساختہ پرامپٹ بھیجیں، یقینی بنائیں کہ max_tokens پورے صفحے کے لیے کافی بڑا ہے، چیک کریں کہ finish_reason stop ہے، اور جواب کو tool.html کے طور پر محفوظ کریں۔ نیچے وہ اسکرپٹ ہے جو بالکل یہی کرتا ہے، اور ایک پرامپٹ ٹیمپلیٹ جسے آپ اپنے ٹول کے لیے ڈھال سکتے ہیں۔

خیال سادہ ہے، اور DeepSeek نے ابھی یہی دکھایا ہے۔ اس نے DeepSeek Harness میں Creator Mode کے لیے سات ڈیمو پرامپٹس کا مجموعہ شائع کیا (صفحہ، 3 نومبر 2026 کو چیک کیا گیا): ایک 3D لینڈ مارک گیلری، ایک پوسٹر ورک بینچ، ایک ویڈیو ایڈیٹنگ ورک بینچ، ایک پیپر ریڈر، ایک گفتگو کے اعداد و شمار کا بورڈ اور کچھ اور۔ Creator Mode خود Harness ایپ کے اندر رہتا ہے۔ اگر آپ اپنی اسکرپٹ میں اور اپنی کلید کے ساتھ وہی "پرامپٹ اندر، ٹول باہر" فلو چاہتے ہیں، تو سنگل فائل کیس کے لیے ایک عام چیٹ کمپلیشن کافی ہے۔ اگر آپ خود Harness استعمال کرتے ہیں، تو اسے CheapTokens سے جوڑنا ایک الگ مختصر گائیڈ ہے۔

"مجھے ایک ٹول بناؤ" پرامپٹ کو کیا چاہیے#

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

یہاں ٹیمپلیٹ ہے، پانچ حصے:

What it is: <one sentence: the tool and who uses it>
Layout: <what is on the screen, top to bottom>
Controls: <every input and button, and what each one does>
Defaults: <what the page shows before the user touches anything>
Constraints: <single HTML file, no external requests, no libraries, size of the page>

اور ایک بھرا ہوا ورژن۔ فرض کریں آپ کھانا پکانے کی پیمائشیں تبدیل کرتے رہتے ہیں اور کنورٹر ڈھونڈنے سے تھک گئے ہیں:

What it is: a unit converter for cooking, for someone standing in a kitchen with a phone.
Layout: a title, one number field, two dropdowns (from, to), a large result line under them.
Controls: the dropdowns hold cup, tablespoon, teaspoon, ml, oz, g (flour) and g (sugar). Typing a number updates the result immediately. A swap button exchanges the two dropdowns.
Defaults: 1 cup to ml, result already shown.
Constraints: one HTML file with inline CSS and JavaScript, no external libraries, fonts or network requests, works on a narrow phone screen, dark text on a light background.

اسے اسکرپٹ کے ساتھ prompt.txt کے طور پر محفوظ کریں۔ "Constraints" لائن سب سے زیادہ وزن اٹھاتی ہے: "no external requests" کے بغیر ماڈل CDN لائبریری کھینچ لانا پسند کرتا ہے، اور پھر صفحہ آف لائن ٹوٹ جاتا ہے۔

اسکرپٹ: درخواست، جانچ، محفوظ#

CheapTokens API https://api.cheaptokens.dev/v1 پر OpenAI Chat Completions کے ساتھ مطابقت رکھتا ہے، اس لیے openai پیکیج دو تبدیلیوں کے ساتھ کام کرتا ہے: بیس URL اور کلید۔ پورے صفحے کے لیے ہم deepseek-ai/DeepSeek-V4-Flash-0731 استعمال کرتے ہیں: یہ فی جواب 32,768 آؤٹ پٹ ٹوکن تک اجازت دیتا ہے اور اس کی 380K کانٹیکسٹ ونڈو ہے۔ مکمل API تفصیلات CheapTokens ڈاکس میں ہیں۔

پیکیج انسٹال کریں، اپنی کلید ماحول کے متغیر میں رکھیں، اور قیمتوں کے جدول سے دو قیمتیں سیٹ کریں (اسکرپٹ انہیں لاگت چھاپنے کے لیے استعمال کرتا ہے):

pip install openai
export CHEAPTOKENS_API_KEY="your-key"
export PRICE_IN_PER_M="<input price per 1M from the table>"
export PRICE_OUT_PER_M="<output price per 1M from the table>"

پھر make_tool.py:

import os
import re
import sys

from openai import OpenAI

MODEL = 'deepseek-ai/DeepSeek-V4-Flash-0731'
PRICE_IN = float(os.environ['PRICE_IN_PER_M'])    # USD per 1M input tokens (from the table)
PRICE_OUT = float(os.environ['PRICE_OUT_PER_M'])  # USD per 1M output tokens (from the table)
FENCE = '`' * 3

client = OpenAI(
    base_url='https://api.cheaptokens.dev/v1',
    api_key=os.environ['CHEAPTOKENS_API_KEY'],
)

prompt = open('prompt.txt', encoding='utf-8').read()

resp = client.chat.completions.create(
    model=MODEL,
    max_tokens=16000,
    messages=[
        {'role': 'system', 'content': 'You write one self-contained HTML file. Reply with the file only, no commentary.'},
        {'role': 'user', 'content': prompt},
    ],
)

choice = resp.choices[0]
if choice.finish_reason == 'length':
    sys.exit('Cut off at max_tokens: the page is unfinished. Raise max_tokens or shrink the request.')

text = choice.message.content or ''
m = re.search(FENCE + r'(?:html)?\s*(.*?)' + FENCE, text, re.DOTALL)
html = (m.group(1) if m else text).strip()
if '</html>' not in html.lower():
    sys.exit('The reply has no closing </html>; not saving it.')

with open('tool.html', 'w', encoding='utf-8') as f:
    f.write(html)

u = resp.usage
cost = (u.prompt_tokens * PRICE_IN + u.completion_tokens * PRICE_OUT) / 1_000_000
print(f'saved tool.html, {u.prompt_tokens} in / {u.completion_tokens} out, about ${cost:.6f}')

اقدامات کی ترتیب اہم ہے، اور اسے غلط کرنا آسان ہے:

max_tokens کیوں طے کرتا ہے کہ صفحہ کام کرے گا یا نہیں#

ایک مکمل انٹرایکٹو صفحہ ایک طویل جواب ہے۔ HTML، CSS اور JavaScript جلدی جمع ہو جاتے ہیں، اور ماڈل انہیں اسی ترتیب میں لکھتا ہے: اگر جواب کٹ جائے تو آپ سب سے پہلے اسکرپٹ کا اختتام کھو دیتے ہیں، جو بالکل وہی حصہ ہے جو بٹنوں کو کام کرنے دیتا ہے۔ براؤزر پھر بھی صفحہ کھول سکتا ہے۔ بس کچھ نہیں ہوتا۔

اسی لیے اسکرپٹ متن دیکھنے سے پہلے finish_reason چیک کرتا ہے۔ stop کا مطلب ہے ماڈل نے خود ختم کیا۔ length کا مطلب ہے کہ اس نے فائل کے درمیان میں max_tokens کی حد کو چھو لیا۔ اس مسئلے کا عمومی ورژن AI جواب کٹ گیا؟ finish_reason length ٹھیک کریں میں شامل ہے؛ یہاں قاعدہ مختصر ہے: ایسا صفحہ کبھی محفوظ نہ کریں جس کا finish_reason length ہو۔

اگر آپ واقعی یہ دیکھیں:

• max_tokens بڑھائیں (DeepSeek-V4-Flash فی جواب 32,768 تک اجازت دیتا ہے)؛
• یا کم مانگیں: کم کنٹرولز، ایک اسکرین، کوئی اینیمیشن نہیں؛
• GLM-5.3-Flash (zai-org/GLM-5.3-Flash) پر حد 8,192 آؤٹ پٹ ٹوکن ہے، اس لیے وہ ماڈل چھوٹے ٹولز کے لیے موزوں ہے، جیسے اوپر والا کنورٹر۔

دوسری جانچ، متن میں </html>، اس خاموش ناکامی کو پکڑتی ہے جہاں ماڈل فائل مکمل کیے بغیر شائستگی سے جواب ختم کر دیتا ہے۔ max_tokens سیٹ کرنا بھی ماڈل سے زیادہ لکھواتا نہیں: یہ صرف ایک حد ہے، اور آپ اصل میں پیدا ہونے والے ٹوکنز کی قیمت دیتے ہیں (اس پر مزید آؤٹ پٹ ٹوکنز کم کریں میں)۔

اسے کھولیں اور صفحہ دیکھیں#

tool.html کو ڈبل کلک کر کے کھولیں، یا ٹرمینل سے: macOS پر open tool.html، Linux پر xdg-open tool.html، Windows پر start tool.html۔

یہ وہ کوڈ ہے جو ایک ماڈل نے آپ کے لیے لکھا ہے، اس لیے اس پر بھروسا کرنے سے پہلے ایک منٹ صرف کریں۔ براؤزر کے ڈویلپر ٹولز کھولیں (F12)، Network ٹیب دیکھیں اور دوبارہ لوڈ کریں: "no external requests" پابندی کے ساتھ یہ خالی رہنا چاہیے۔ پھر اپنے پرامپٹ کے "Controls" حصے سے ہر کنٹرول ایک بار کلک کریں۔

اگر کچھ گڑبڑ ہو، تو شروع سے دوبارہ نہ بنائیں۔ پرامپٹ میں مخصوص چیز کے بارے میں ایک جملہ شامل کریں ("swap بٹن کو بھی دونوں ویلیوز تبدیل کرنی چاہئیں") اور دوبارہ چلائیں۔ DeepSeek کے اپنے صفحے میں نوٹ ہے کہ اس کے کچھ ڈیمو کئی گفتگو کے راؤنڈز میں بہتر بنائے گئے، اس لیے دوسرا پاس معمول ہے۔

ایک جنریشن کی لاگت#

فرض کریں پرامپٹ تقریباً 600 ان پٹ ٹوکن ہے اور مکمل صفحہ تقریباً 6,000 آؤٹ پٹ ٹوکن (درمیانے سائز کے ٹول کے لیے ایک مفروضہ؛ آپ کی اپنی usage لائن اصل اعداد و شمار دکھائے گی)۔ DeepSeek-V4-Flash پر ایک رن $0.00061 ہے، اور GLM-5.3-Flash پر $0.00025۔ دونوں موجودہ قیمت کی فہرست سے لائیو اعداد و شمار ہیں، اور مجموعی طور پر، ان پٹ اور آؤٹ پٹ ملا کر، دونوں OpenRouter سے سستے ہیں۔

عملی طور پر آپ کو ٹول پہلی کوشش میں درست نہیں ملے گا، اس لیے تکرار میں سوچیں: پرامپٹ کی دس تبدیلیاں اس لائن کا دس گنا ہیں، پھر بھی ایک ایسے ٹول کے لیے چھوٹی رقم جو ورنہ آپ ہاتھ سے لکھتے۔ اس کا تقریباً سارا حصہ آؤٹ پٹ کی طرف ہے، یعنی صفحہ خود، اسی لیے مانگ کم کرنا (کم کنٹرولز) جواب اور بل دونوں مختصر کر دیتا ہے۔

اگر یہ کام نہ کرے#

اگر آپ ماڈل کے جواب کو صفحے کے بجائے ڈیٹا کے طور پر پارس کرنا چاہتے ہیں، تو نکالنے کی ترکیب وہی ہے جو LLM جواب پر json.JSONDecodeError میں ہے۔ API میں نئے ہیں؟ اپنی پہلی API درخواست سے شروع کریں۔