Bir API ile tek prompttan HTML aracı üretin (Python)

Tek bir API çağrısıyla çalışan tek dosyalık bir araç elde edebilirsiniz: iyi yapılandırılmış bir prompt gönderin, max_tokens değerinin tam bir sayfa için yeterince büyük olduğundan emin olun, finish_reason değerinin stop olduğunu kontrol edin ve yanıtı tool.html olarak kaydedin. Aşağıda tam olarak bunu yapan betik ve kendi aracınız için yeniden şekillendirebileceğiniz bir prompt şablonu var.

Fikir basit ve DeepSeek bunu az önce gösterdi. DeepSeek Harness'taki Creator Mode için yedi demo prompttan oluşan bir koleksiyon yayımladı (sayfa, 3 Kasım 2026'da kontrol edildi): bir 3D simge yapı galerisi, bir poster tezgâhı, bir video düzenleme tezgâhı, bir makale okuyucu, bir konuşma istatistikleri panosu ve birkaç tane daha. Creator Mode, Harness uygulamasının içinde yaşıyor. Aynı "prompt gir, araç çık" akışını kendi betiğinizde ve kendi anahtarınızla istiyorsanız, tek dosyalık durum için sıradan bir chat completion yeterlidir. Harness'ın kendisini kullanacaksanız, onu CheapTokens'e bağlamak ayrı ve kısa bir rehberdir.

"Bana bir araç yap" promptunun ihtiyaç duyduğu şeyler#

O demo promptlardan birkaçını okuyun, bir kalıp ortaya çıkıyor. Her biri aracın ne olduğunu, ekranda ne bulunduğunu, kontrollerin ne yaptığını, başlangıç durumunun ne olduğunu ve ne yapmaması gerektiğini söylüyor. Bunlardan birini atlarsanız model boşluğu kendi tahminiyle doldurur, ki bu genellikle sizinki değildir.

İşte şablon, beş bölüm:

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>

Ve doldurulmuş bir sürüm. Diyelim ki sürekli yemek ölçülerini dönüştürüyorsunuz ve bir dönüştürücü aramaktan yoruldunuz:

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.

Bunu betiğin yanına prompt.txt olarak kaydedin. "Constraints" satırı yükün çoğunu taşır: "no external requests" olmadan model bir CDN kütüphanesi çekmeyi sever ve sayfa çevrimdışı bozulur.

Betik: istek, kontrol, kaydet#

CheapTokens API'si https://api.cheaptokens.dev/v1 adresinde OpenAI Chat Completions ile uyumludur, yani openai paketi iki değişiklikle çalışır: temel URL ve anahtar. Tam bir sayfa için deepseek-ai/DeepSeek-V4-Flash-0731 kullanıyoruz: yanıt başına 32.768 çıktı tokenına kadar izin verir ve 380K bağlam penceresine sahiptir. Tam API ayrıntıları CheapTokens belgelerinde.

Paketi kurun, anahtarınızı bir ortam değişkenine koyun ve iki fiyatı fiyat tablosundan ayarlayın (betik bunları maliyeti yazdırmak için kullanır):

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>"

Sonra 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}')

Adımların sırası önemlidir ve yanlış yapmak kolaydır:

max_tokens sayfanın çalışıp çalışmayacağını neden belirler#

Tam etkileşimli bir sayfa uzun bir yanıttır. HTML, CSS ve JavaScript hızla birikir ve model bunları bu sırayla yazar: yanıt kesilirse önce betiğin sonunu kaybedersiniz, ki düğmeleri çalıştıran tam da o kısımdır. Tarayıcı sayfayı yine de açabilir. Sadece hiçbir şey yapmaz.

Bu yüzden betik metne bakmadan önce finish_reason değerini kontrol eder. stop modelin kendi kendine bitirdiği anlamına gelir. length ise dosyanın ortasında max_tokens sınırına takıldığı anlamına gelir. Bu sorunun genel hali AI yanıtı kesildi mi? finish_reason length sorununu düzeltin yazısında ele alınıyor; buradaki kural kısa: finish_reason değeri length olan bir sayfayı asla kaydetmeyin.

Yine de görürseniz:

• max_tokens değerini artırın (DeepSeek-V4-Flash yanıt başına 32.768'e kadar izin verir);
• ya da daha azını isteyin: daha az kontrol, tek ekran, animasyon yok;
• GLM-5.3-Flash'te (zai-org/GLM-5.3-Flash) sınır 8.192 çıktı tokenıdır, yani o model yukarıdaki dönüştürücü gibi küçük araçlara uyar.

İkinci kontrol, metindeki </html>, modelin dosyayı bitirmeden yanıtı kibarca sonlandırdığı daha sessiz hatayı yakalar. max_tokens ayarlamak da modelin daha fazla yazmasını sağlamaz: bu yalnızca bir üst sınırdır ve yalnızca gerçekte üretilen tokenlar için ödersiniz (bunun hakkında daha fazlası Çıktı tokenlarını azaltın yazısında).

Açın ve sayfaya bakın#

tool.html dosyasını çift tıklayarak veya terminalden açın: macOS'te open tool.html, Linux'ta xdg-open tool.html, Windows'ta start tool.html.

Bu, bir modelin sizin için yazdığı koddur, o yüzden ona güvenmeden önce bir dakika ayırın. Tarayıcının geliştirici araçlarını açın (F12), Network sekmesine bakın ve yeniden yükleyin: "no external requests" kısıtıyla boş kalmalıdır. Sonra promptunuzun "Controls" bölümündeki her kontrolü bir kez tıklayın.

Bir şey ters giderse sıfırdan yeniden üretmeyin. Prompta belirli şeyle ilgili bir cümle ekleyin ("the swap button must also swap the two values") ve tekrar çalıştırın. DeepSeek'in kendi sayfası, demolarından bazılarının birkaç konuşma turu boyunca iyileştirildiğini belirtiyor, yani ikinci bir geçiş normaldir.

Tek bir üretimin maliyeti#

Diyelim ki prompt yaklaşık 600 giriş tokenı ve bitmiş sayfa yaklaşık 6.000 çıktı tokenı (orta boyutlu bir araç için bir varsayım; kendi usage satırınız gerçek sayıları gösterecektir). DeepSeek-V4-Flash'te bir çalıştırma $0.00061, GLM-5.3-Flash'te ise $0.00025. İkisi de güncel fiyat listesinden canlı sayılardır ve toplamda, giriş ve çıktı birlikte sayıldığında, ikisi de OpenRouter'dan daha ucuzdur.

Pratikte aracı ilk denemede doğru yapamazsınız, o yüzden yinelemelerle düşünün: promptun on ince ayarı o satırın on katıdır, yine de elle yazacağınız bir araç için küçük bir meblağdır. Neredeyse tamamı çıktı tarafıdır, yani sayfanın kendisidir, bu yüzden isteği küçültmek (daha az kontrol) yanıtı ve faturayı kısaltır.

Çalışmazsa#

Modelin yanıtının bir sayfa yerine veri olarak ayrıştırılmasını istiyorsanız, çıkarma hilesi bir LLM yanıtında json.JSONDecodeError yazısındakiyle aynıdır. API'de yeni misiniz? İlk API isteğiniz ile başlayın.