Show HN: screenshot-to-code - GPT Vision(OSS टूल) का उपयोग करके स्क्रीनशॉट को साफ़-सुथरे HTML कोड में बदलना
(github.com/abi)- AI का उपयोग करके स्क्रीनशॉट, मॉकअप, Figma डिज़ाइन और स्क्रीन रिकॉर्डिंग को साफ़ और काम करने वाले कोड में बदलने वाला टूल
- सपोर्टेड स्टैक हैं: HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap, Ionic + Tailwind
- वेबसाइट के व्यवहार को शामिल करने वाली स्क्रीन रिकॉर्डिंग लेकर उसे काम करने वाले प्रोटोटाइप में बदलने की सुविधा भी सपोर्ट करता है
- डिफ़ॉल्ट AI मॉडल हैं Gemini 3 Flash Preview, Gemini 3.1 Pro Preview, GPT-5.5, GPT-5.4 Mini, Claude Opus 4.6, Claude Opus 4.8, और इमेज जनरेशन के लिए Replicate-आधारित z-image-turbo का उपयोग होता है
- लोकल रन के लिए API key और backend·frontend कॉन्फ़िगरेशन की ज़रूरत होती है, और ऐप की संरचना React/Vite frontend और FastAPI backend है
- OpenAI, Anthropic, Gemini में से कम-से-कम एक model provider key आवश्यक है
- Gemini स्क्रीनशॉट से वास्तविक लोगो और इमेज एक्सट्रैक्ट करता है, और video mode के लिए आवश्यक है
- Replicate image editing, background removal और Replicate-आधारित image generation को सक्षम करता है
- ज़्यादा keys जोड़ने पर variant के अनुसार अधिक शक्तिशाली model combinations अपने-आप चुने जाते हैं, और अगर केवल एक key हो तो उसी provider के मॉडल इस्तेमाल होते हैं
- वैकल्पिक फीचर screenshot preview Chromium इंस्टॉल होने के बाद जनरेट किए गए पेज को headless browser में render करके विज़ुअल रूप से जाँचता है; Chromium न होने पर यह टूल स्किप कर दिया जाता है
- रन करने के तरीके में local development, hosted app का उपयोग, और Docker run शामिल हैं; Docker run पर ऐप
http://localhost:5173पर चलता है
1 टिप्पणियां
Hacker News की रायें
यह सचमुच जादू जैसा दिखता है, और मेरे दिमाग में computation के काम करने के मॉडल में इसे कहाँ फिट करूँ, समझ नहीं आ रहा
मैं समझता था कि neural network के universal function approximator होने का मतलब है कि वे functions के ऐसे set को model करते हैं जो input को किसी खास domain के output में map करता है; MNIST जैसे examples conceptually समझ में आते हैं
लेकिन यहाँ मैं सोच रहा हूँ कि क्या GPT की general training pixel intensities से HTML+Tailwind text tokens तक जाने वाली value mapping लागू करती है, और फिर browser उन tokens को interpret/render करता है तो result input image का approximation बन जाता है
अगर ऐसा है, तो GPT सिर्फ pixel→HTML/CSS conversion ही नहीं, बल्कि browser HTML/CSS को कैसे render करता है, उसे भी model कर रहा है। ऐसी mapping मौजूद हो सकती है, यह मान सकता हूँ, लेकिन यह हैरान करता है कि GPT ने कई दूसरे topics पर लिखते हुए भी इसे derive कर लिया
ज्यादा practical तौर पर, मैं यह भी जानना चाहता हूँ कि क्या ऐसे tool को diagram compiler की तरह देखा जा सकता है, और क्या आगे चलकर यह Sketch/Figma जैसे outputs लेकर HTML/CSS/JS निकालने वाली build pipeline का हिस्सा बन सकता है
latent space एक n-dimensional space है जहाँ ideas और concepts जितने समान होते हैं, उतने करीब रखे जाते हैं; यह arrangement training के दौरान training data से बनता है, इसलिए training process ही latent space बनाने की process है
कल्पना करें कि 2D grid में “house” और “mansion” पास-पास हैं, जबकि “growling” बिल्कुल अलग कोने में है। GPT-4 जैसा latent space इससे मिलता-जुलता है, लेकिन सैकड़ों से हजारों dimensions वाला है, और scale का यही फर्क विशाल knowledge को उपयोगी ढंग से arrange करने देता है
image reading पर लौटें तो, training data में web page images और उनसे जुड़ा code था, और उस code ने training process को बताया कि code-image pairs को कहाँ रखना है। labels और captions भी images को text की तरह latent space में रखने में मदद करते हैं
इसलिए जब GPT-4 को नई website image देकर matching HTML माँगा जाता है, तो वह उस image को latent space में place कर सकता है और पास में मौजूद corresponding HTML ला सकता है
लेकिन यह learnability या जरूरी structure के बारे में कुछ नहीं कहता, और जरूरी structure अवास्तविक रूप से बड़ा भी हो सकता है
इस्तेमाल होने वाला training algorithm, यानी stochastic gradient descent के जरिए backpropagation, universal learner नहीं है, और global minimum मिलने की कोई guarantee भी नहीं है
यह Sketch/Figma step को skip करके सीधे executable prototype तक जाने जैसा दिखता है
“किसी भी arbitrary function को fit कर सकता है” वाला viewpoint सही है, लेकिन limited resources के साथ यह सच में कर सकता है या नहीं, यह नहीं बताता, इसलिए अपने-आप में ज्यादा उपयोगी नहीं लगता
अभी जो हैरान करने वाली बात है वह बहुत पहले से मौजूद universal approximator नहीं, बल्कि abstract concepts को इतने अच्छे से approximate करना है, और जवाब data scale में है
एक viewpoint है कि compression ही intelligence है, और इन models को अच्छे compressors की तरह देखा जा सकता है। training के दौरान weights fixed size के होते हैं और जिस data को fit करना है उससे बहुत छोटे होते हैं; अगर goal original text reconstruction, यानी next token prediction है, तो data को बहुत अच्छी तरह compress करने के अलावा कोई तरीका नहीं
जितना ज्यादा smart होगा, उतना बेहतर predict/compress करेगा, और compression के लिए मजबूर किए जाने पर, असल में intelligence हासिल करने के लिए मजबूर हो जाता है। यह वैसा है जैसे exam से पहले answers याद किए जा सकते हैं, लेकिन questions हजारों हों और याद न किए जा सकें, तो subject सीखकर exam के दौरान answer derive करना सबसे अच्छा तरीका है
यह compression/intelligence duality LLM की generalization ability को नकारने वालों के लिए विवादास्पद है, लेकिन अभी मेरा mental model यही है और मैं इसे अभी तक disprove नहीं कर पाया हूँ
इस viewpoint को स्वीकार कर लें तो multimodal capability engineering problem के करीब है। GPT-4V के अंदरूनी हिस्से ठीक-ठीक नहीं जानता, लेकिन public multimodal research से अनुमान लगाया जा सकता है
अगर image और उस image को describe करने वाले text pairs हों, तो images को text की तरह tokenize/embed किया जाता है। ViT(Visual Transformer) की तरह image को patch-wise visual features में बदलकर लंबी sequence बनाई जा सकती है
इस embedding को pretrained LLM में देकर image description text predict करने के लिए मजबूर करें, तो image embedding देखकर general image understanding हासिल करने के अलावा कोई रास्ता नहीं
दिए गए image की जानकारी समझकर उसे natural language में express करने लायक हो जाने के बाद, उस understanding का इस्तेमाल कराने के लिए instruction tuning कर दी जाती है
Stable Diffusion जैसे generative image models भी इसी तरह, CLIP जैसे contrastive model को train करके same concept की image embedding और text embedding को करीब लाते हैं, और उस dual information का इस्तेमाल generation direction control करने में करते हैं
हैरान करने वाली बात यह है कि इस scale की capability पहले से है, और सिर्फ ज्यादा compute से और ज्यादा capability मिल सकती है। अगर मौजूदा GPT-4 का final loss 1 है, तो किसी तरह उसे 0.1 तक घटा सकें तो इसके बहुत ज्यादा capable होने की संभावना बड़ी है
दूसरे सवाल पर, यह उसी दिशा में दिखता है, और शायद अभी भी संभव होगा
मुख्य बात यहाँ है: https://github.com/abi/screenshot-to-code/blob/main/backend/...
prompt यूज़र के लिए Tailwind expert के रूप में screenshot देखकर Tailwind, HTML, JS में single-page app बनाने का निर्देश देता है
इसमें background color, text color, font size, padding, margin, border वगैरह को ठीक-ठीक match करने, screenshot का text ज्यों का त्यों इस्तेमाल करने, “पूरा code लिखो”, repeated elements की संख्या match करो, comments से omit मत करो, placehold.co images इस्तेमाल करो और alt में detailed description डालो जैसी instructions शामिल हैं
Tailwind के लिए
https://cdn.tailwindcss.com, Google Fonts, Font Awesome इस्तेमाल किए जा सकते हैं, और कहा गया है कि पूरा code सिर्फ tags के अंदर लौटाएँ और Markdown code fences न इस्तेमाल करेंनिजी तौर पर मुझे नहीं लगता कि defensive prompting आगे का रास्ता है, लेकिन यह काम करता है, यह सच में कमाल है। teenage में जिस चीज़ का सपना देखा था, वह अब काफ़ी कम मेहनत से संभव लगती है
commands को अस्थिर तरीके से follow करना, bugs बनाना, और machine पर चिल्लाकर उसे ठीक करना
“यह एक complex challenge है” एक बार और दिख गया तो सच में थक जाऊँगा। कभी-कभी 60% performance वाला, पर कम “lazy” model बेहतर होता है। बाकी 40% capability इस्तेमाल करवाने के लिए extra prompt engineering चाहिए, और यह technical limitation से ज़्यादा जानबूझकर कमजोर किया गया जैसा लगता है
फिर भी competitors के लिए यह अभी भी मुश्किल demand है, इसलिए फिलहाल OpenAI जीतता है
बेशक यह अब भी बेहद cool और useful है, इसलिए सिर्फ़ शिकायत नहीं करूँगा; अगर सच में करके दिखाने वाली competition आई तो अगले कुछ साल मज़ेदार होंगे
“इसे सही तरह करना मेरे career के लिए बहुत important है” जोड़कर देखना अच्छा रहेगा
अभी ढूँढ नहीं पाऊँगा, लेकिन किसी YouTube research video के अनुसार कई tasks में output quality noticeably बेहतर हुई थी
research के मुताबिक emotional language वाले prompts ने “sentence को formal language में बदलना”, “दिए गए objects की common property ढूँढना” जैसे tasks में overall 8% performance improvement दिया
अब समझ नहीं आता कि क्या बनाना चाहिए और कैसे सोचना चाहिए
इस project को कमतर दिखाने का बिल्कुल इरादा नहीं है, और source open करने के लिए आभार है, लेकिन अब ऐसे पूरे problem groups बन गए हैं जो काफ़ी आसानी से solve होते दिखते हैं, इसलिए “आखिर क्यों करें?” वाली feeling आती है
क्या solve करने लायक है और कैसे solve करना है, दोनों तरफ़ से problem framing को फिर से calibrate करना पड़ेगा
अगर ऐसा tool थोड़ा polish ही माँगने वाला “काफी ठीक code” दे सके, तो यह बड़ी time saving है
अगर बस messy code दे, तो कम useful है
technologists में इस्तेमाल हो रहे tools पर ही ज़रूरत से ज़्यादा obsess करने की tendency होती है। सिर्फ़ इसलिए कि Framework A और Toolkit B को जबरदस्ती जोड़ दिया गया है, कितने ही बहुत ordinary खाली “hello world” projects showcase होते देखे हैं, और यह सच में boring है
LLM-based technology इस context में challenging इसलिए है क्योंकि possibilities को ही दोबारा सोचना पड़ता है। अगर tool general-purpose है, तो simple showcase बनाने का कोई खास मतलब नहीं है
हैरानी की बात बेशक यह है कि यह general-purpose model से हो जाता है, लेकिन इस task के लिए supervised learning data generate करना काफ़ी आसान लगता है
HTML generate करें → render करके screenshot लें → उस data को उल्टा training में इस्तेमाल करें
GitHub page पर लिखा है कि Pico के जरिए hosted version provide करने की योजना है, तो उत्सुक हूँ कि Pico क्यों चुना गया
अभी उसी page के जरिए Pico के बारे में पता चला, और लगता है Pico revenue का सिर्फ़ 30% ही pay करता है। यह typical app store के 60% share का आधा है, और जहाँ तक मैंने पढ़ा, payout तभी होता है जब free user app try करने के बाद sign up करे; जो user पहले से platform पर था और app इस्तेमाल करता है, उसके लिए payout नहीं होता लगता है
traditional platforms से terms भी काफ़ी खराब और user base भी छोटा दिखता है, इसलिए चयन की वजह जानना चाहता हूँ
और Pico एक general web app creation platform है। revenue का 30% वाला हिस्सा सिर्फ़ affiliates पर लागू होता है, in-app payments पर नहीं। Pico अभी in-app payments support नहीं करता
point ठीक से समझ नहीं आया। अगर मौजूदा website copy करनी है तो Httrack क्यों नहीं इस्तेमाल करते, समझ नहीं आता
original website हमेशा ज़्यादा similar होगी और GPT API cost भी बच सकती है। यह technique तब चमकती है जब sketch से website बनानी हो
generated website demo को
srcdocवाले iframe में generate होते समय ही दिखाने का तरीका सच में अच्छा लगाsimple और elegant
“AI” implementation की details को नज़रअंदाज़ करें, तो यह HTML generate करने जैसा है, ठीक उसी अर्थ में जैसे किसी raster image को ऐसे SVG में बदलना जो zoom करने पर बहुत खराब दिखता है और renderer से अनावश्यक lines draw और fill करवाता है
यानी output इतना साफ़-सुथरा नहीं दिखता कि उसे किसी web developer को सौंपा जा सके। developer को शुरुआत से ही high-end tools की ज़रूरत नहीं होती, और शायद उसे सबसे obvious top-level structure के अलावा लगभग सब कुछ फिर से लिखना पड़ेगा, जिसे text editor का snippet plugin कहीं बेहतर कर देता है
web development का बड़ा हिस्सा दिखाई भी नहीं देता। accessibility वह metadata है जो screenshot से नहीं मिल सकता, और responsive CSS के लिए शायद ऐसा video चाहिए होगा जिसमें सभी behavior और animations वगैरह पूरी तरह शामिल हों
JavaScript को किसी भी मात्रा की image recognition से तय करना लगभग असंभव लगता है
क्या बेहतर नहीं होगा कि developer tools से actual HTML सीधे copy कर लिया जाए?
phishing site बनाने की speed काफी तेज़ हो जाएगी ऐसा लगता है