Show HN: GPT Vision (OSS टूल) का उपयोग करके स्क्रीनशॉट को साफ-सुथरे HTML कोड में बदलें

स्क्रीनशॉट को कोड में बदलने वाला ऐप

• स्क्रीनशॉट को HTML/Tailwind CSS में बदलने वाला एक सरल ऐप
• कोड जनरेट करने के लिए GPT-4 Vision का उपयोग करता है, और मिलती-जुलती इमेज बनाने के लिए DALL-E 3 का
• डेमो देखने के लिए नीचे दिए गए उदाहरण सेक्शन को देखें

अपडेट विवरण

• जिन मामलों में इमेज जनरेशन की ज़रूरत नहीं है, उनके लिए DALL-E इमेज जनरेशन को disable करने की सेटिंग जोड़ी गई
• अब ऐप के भीतर सीधे कोड देखा जा सकता है
• यदि AI गलत तरीके से style लागू करे या किसी सेक्शन को छोड़ दे, तो कोड अपडेट करने के निर्देश दिए जा सकते हैं

शुरुआत करें

• यह ऐप React/Vite frontend और FastAPI backend से बना है
• GPT-4 Vision API तक पहुंच रखने वाली OpenAI API key की आवश्यकता है
• backend और frontend चलाने के तरीके दिए गए हैं, इसलिए ऐप को लोकल में इस्तेमाल किया जा सकता है

अक्सर पूछे जाने वाले सवाल (FAQ)

• backend सेटअप के दौरान error आने पर समाधान दिए गए हैं
• GPT4 Vision मॉडल शामिल करने वाली OpenAI API key प्राप्त करने का तरीका बताया गया है
• feedback, feature request, और bug report भेजने के तरीके बताए गए हैं

उदाहरण

• NYTimes, Instagram page, Hacker News आदि के original और replica उदाहरण दिए गए हैं

होस्टेड वर्ज़न

• आपके पास OpenAI key होनी चाहिए और GPT-4 Vision तक पहुंच भी होनी चाहिए
• लोकल इंस्टॉलेशन निर्देश शुरुआत करें सेक्शन में देखे जा सकते हैं

GN⁺ की राय

यह ऐप स्क्रीनशॉट को web code में बदलने वाला एक अभिनव टूल है, और इसमें GPT-4 Vision तथा DALL-E 3 जैसी नवीनतम AI तकनीकों का उपयोग सबसे महत्वपूर्ण बात है। यह तकनीक web developers और designers के लिए समय बचाती है और उन्हें रचनात्मक काम पर अधिक ध्यान देने का अवसर देती है, इसलिए यह खास तौर पर रोचक और आकर्षक है। साथ ही, उपयोगकर्ता सीधे AI को निर्देश देकर कोड में बदलाव कर सकते हैं, जिससे user experience बेहतर होता है और AI की सटीकता बढ़ाने में भी मदद मिलती है.

[GN⁺]

Hacker News टिप्पणियाँ

• एक राय के अनुसार यह तकनीक जादू जैसी लगती है; यह समझ आता है कि neural network input को output से map करने वाले functions के set को model करता है, लेकिन यह हैरान करने वाला है कि GPT images को HTML+Tailwind text tokens में map करता है और browser उन्हें render करता है।

  इस बात पर आश्चर्य व्यक्त किया गया कि GPT image के pixel intensity को HTML और Tailwind text tokens में map करता है, और browser इन tokens को interpret और render करता है।

• सवाल कि क्या इस टूल को diagram compiler की तरह देखा जा सकता है, और क्या यह Sketch या Figma जैसे tools से बने artifacts को HTML/CSS/JS में बदलने वाली build pipeline का हिस्सा बन सकता है।

  टूल की diagram compiler के रूप में संभावित भूमिका और build pipeline में इसके उपयोग की संभावना पर विचार।

• Tailwind, HTML, JS का उपयोग करके user द्वारा दिए गए web page screenshots के आधार पर single-page app बनाने वाले prompt का उदाहरण, और design को बिल्कुल सटीक रूप से reproduce करने पर जोर देने वाले निर्देश।

  Tailwind, HTML, JS का उपयोग करके web page design को सटीक रूप से reproduce करने के लिए निर्देश देने वाले prompt का उदाहरण।

• व्यक्तिगत राय कि defensive prompting के अलावा कोई दूसरा तरीका बेहतर दिशा हो सकता है, लेकिन यह तथ्य ही चौंकाने वाला है कि यह तकनीक काम करती है।

  defensive prompting को लेकर संदेहपूर्ण दृष्टिकोण और तकनीक के काम करने पर आश्चर्य।

• एक YouTube research video का उल्लेख, जिसमें कहा गया कि "यह मेरे career के लिए बहुत महत्वपूर्ण है" जैसी पंक्ति जोड़ने से output quality बेहतर होती है; राय कि यह वाक्यांश अलग-अलग tasks में output quality सुधारता है।

  output quality बढ़ाने के लिए एक खास वाक्यांश के प्रभाव का उल्लेख।

• राय कि इस तकनीक से हल की जा सकने वाली समस्याओं का दायरा बढ़ गया है, इसलिए अब क्या बनाना चाहिए इस पर फिर से सोचना होगा, और समस्याओं को अलग तरीके से देखने व हल करने की जरूरत है।

  तकनीकी प्रगति के कारण problem-solving के तरीकों में बदलाव और नई समस्या-समझ पर विचार।

• राय कि सामान्य model से यह काम करना चौंकाने वाला है, लेकिन supervised learning के लिए data आसानी से बनाया जा सकता है।

  supervised learning के लिए data generation की सरलता पर राय।

• जानकारी कि GitHub page के जरिए Pico पर hosted version देने की योजना है, और सवाल कि Pico को चुनने की वजह क्या थी।

  Pico के जरिए hosting service देने की योजना और उसे चुनने के कारण पर सवाल।

• generated website के demo को iframe के srcdoc का उपयोग करके real time में दिखाने के तरीके की सादगी और elegance की प्रशंसा।

  generated website demo को real time में दिखाने के इस सरल और elegant तरीके की प्रशंसा।

• राय कि अगर मौजूदा website को copy करना हो, तो Httrack का उपयोग ज्यादा समान परिणाम दे सकता है और GPT API की लागत भी बचा सकता है।

  मौजूदा website की copy के लिए Httrack के उपयोग की दक्षता पर राय।

• चिंता कि इससे phishing sites बनाना बहुत तेज़ हो जाएगा।

  phishing sites बनाए जाने की गति बढ़ने को लेकर चिंता।

• राय कि यह टूल project manager की लगातार बदलती requests को संभालने के लिए बिल्कुल उपयुक्त है, और सवाल कि क्या यह "Make it pop" जैसे अस्पष्ट input पर भी काम करता है।

  project manager की बदलती मांगों को संभालने में टूल की उपयुक्तता और अस्पष्ट input पर इसके काम करने की क्षमता पर सवाल।