"लगता है, जाकर थोड़ा लेटना पड़ेगा."

• TLDraw के Make Real डेमो को आज़माने का अनुभव
• AI का इस्तेमाल करके चित्रों को काम करने वाले software में बदलने वाला टूल
  • OpenAI's GPT-4V का उपयोग करके vector images को HTML/TailWind CSS और Javascript में बदलना

[GN⁺]

Hacker News की राय

• मैं tldraw का Steve हूँ। माफ़ी, यह खराब security patterns वाला toy project है। अगर इसे local पर चलाना है या source देखना है, तो यहाँ है: https://github.com/tldraw/draw-a-ui
  दूसरे examples https://twitter.com/tldraw पर देखे जा सकते हैं। tldraw या इस project के बारे में सवाल हों तो जवाब दे सकता हूँ। यह किसी की नौकरी खत्म करने वाली चीज़ नहीं है, लेकिन इसके साथ खेलना वाकई मज़ेदार है, और ज़्यादा जटिल example यहाँ है: https://twitter.com/tldraw/status/1725083976392437894

  • इसे तुरंत launch करना चाहिए। यह सचमुच चमकदार product है, और $5/month लेकर users से अपनी OpenAI key लाने को कह सकते हो
    एक license server भी है जिसे अभी MIT license के तहत release किया है। यह Elixir में लिखा है और https://go.robocoder.app को चलाता है। setup में मदद चाहिए हो तो संपर्क कर सकते हो: https://github.com/emcmanus/robocoder-server/
  • Steve, पैसे कहाँ भेजने हैं? मज़ाक छोड़ें तो यह काफी convincing चीज़ है। toy project हो सकता है, लेकिन सब इससे इतना enjoy कर रहे हैं
  • शानदार project, और launch के लिए बधाई। मैंने अपनी OpenAI key डाली, लेकिन "you exceeded your current quota, check billing" error आया। सोच रहा था कि $20/month वाली OpenAI Pro subscription से काम चल जाएगा या कोई extra permission चाहिए
    जवाब GitHub README में मिला। उसमें लिखा है कि “अपनी API key इस्तेमाल करने के लिए usage tier 1 access चाहिए, और अपना current tier व upgrade करने का तरीका OpenAI settings में देखें”
  • वह flowchart example असल में key point है, और ऐसे tools में इसे first-class concept की तरह handle किया जाना चाहिए। यह toy नहीं, बल्कि useful चीज़ें बनाने में मदद करने वाले handles देना शुरू करता है
  • आख़िरी example मज़ेदार है, और इस तरह feedback दे पाना हैरान करने वाला है। generated app और text को साथ में select करने पर actual input के रूप में क्या मिलता है, यह जानना चाहूँगा। क्या पहले generate किया गया code और नया text दोनों मिलते हैं?

• repository में मौजूद system prompt यह है:

  You are an expert tailwind developer. A user will provide you with a  
  low-fidelity wireframe of an application and you will return  
  a single html file that uses tailwind to create the website.  
  They may also provide you with the html of a previous design that they want you to iterate from.  
  Carry out any changes they request from you.  
  In the wireframe, the previous design's html will appear as a white rectangle.  
  Use creative license to make the application more fleshed out.  
  if you need to insert an image, use a colored fill rectangle as a placeholder. Respond only with the html file.  
  

  यहाँ "creative license" का ज़िक्र क्यों है, यह ठीक से समझ नहीं आया। हर generation के लिए user prompt इस तरह है:

  [IMAGE_LINK]  
  Turn this into a single html file using tailwind.  
  

  https://github.com/tldraw/draw-a-ui/blob/8a889bf36afc06fbb0c...
  सामान्य tldraw canvas का screenshot लेकर इस prompt के साथ API को भेज दें, तो इसे “private” तरीके से चलाना भी काफी simple लगता है

  • "creative license" का साधारण English में मतलब है constraints की बहुत चिंता न करें और जो best लगे वैसा करें। इसका software license से कोई संबंध नहीं लगता

• Facebook interview question से आया mockup डालकर देखा। इसमें दो checkbox lists और checked items को एक-दूसरे में move करने के लिए दो buttons थे, और इसने ठीक से कर दिया: https://gist.github.com/milesrichardson/2a2f77d4bfb19c3b28dc...

  • मुझे बिल्कुल नहीं पता था कि toList.appendChild(item.closest('li')); item को move कर देता है। हर दिन कुछ नया सीखते हैं
  • screen reader से check किया, तो button दबाने पर कोई announcement नहीं होती। यह समस्या है। “Checkbox B moved to the left” जैसे कुछ बोलना चाहिए
    कोई announcement न हो तो user को पता नहीं चलता कि button दबाने पर सच में कुछ हुआ या नहीं। test page: https://output.jsbin.com/jixoqur/quiet

• ये नए-नए demos एक तरफ यह दिखाते हैं कि हाल में machine learning/AI में हुई प्रगति कितनी प्रभावशाली है, और साथ ही यह भी कि दुनिया भर के लाखों developers कितने दोहराव वाले और कम मौलिक काम को बार-बार implement करते रहते हैं
  ज़्यादातर UI screens को एक-दो paragraphs में ठीक-ठीक समझाया जा सकता है, इसलिए यह भी अजीब नहीं कि उन्हें अपेक्षाकृत छोटे embedding vector में काफी विस्तार से व्यक्त किया जा सकता है

  • बड़े निष्कर्ष से सहमत हूँ, लेकिन यह भी ज़रूरी है कि ऐसे demos में से ज़्यादातर बहुत सावधानी से चुने गए examples होते हैं। Social media पर सिर्फ viral demos देखने से लगता है कि AI जटिल कामों में असलियत से कहीं आगे है
    असल काम में AI का गहन इस्तेमाल न करने वाले non-technical roles खास तौर पर इस भ्रम में आ जाते हैं। मैदान में इसका अनुभव रखने वाले लोग आम तौर पर इसे ज्यादा बारीकी से देखते हैं। यह बेहद उपयोगी है, लेकिन गलतियाँ भी खूब करता है, और production-level नतीजा पाने के लिए सावधानी से fine-tune/सुधारना पड़ता है। AI optimist होने के नाते भी, value सचमुच है और प्रभावशाली demos हमें दिशा दिखाते हैं, लेकिन औसत नतीजों को बढ़ी-चढ़ी उम्मीदों तक पहुँचने में समय लगेगा
  • Software ideas को व्यक्त करने के कई तरीके भी बहुत inefficient हैं। सच में दिलचस्प हिस्सा, यानी entropy, बहुत छोटा होता है
    इस demo में सचमुच CSS की दो properties adjust करने वाले दो sliders हैं, इसलिए UI spec में information content ज्यादा नहीं है। अगर कोई ठीक UI specification language होती, तो यह तीन lines का code होता। कठिनाई web UI boilerplate को manage करने से आती है
  • सैकड़ों “Hello World” जैसे demos पर सवार B2C AI hype से जो असहजता थी, उसे अच्छी तरह बयान किया गया है। माहौल कुछ ऐसा है: “हे भगवान, programming खत्म हो गई!”
    अजीब बात यह है कि HN पर traditional no-code platforms की बात करते समय लोग scalability और maintenance की सीमाएँ आसानी से पहचान लेते हैं, लेकिन AI जुड़ते ही जैसे ये समस्याएँ अचानक हल हो जाती हैं और black box से निकले spaghetti के बारे में चिंता करने की ज़रूरत नहीं रहती
  • यह बस यह दिखाता है कि हमारा software stack कितना मूर्खतापूर्ण है। सब कुछ इस तरह चलता है: “हो सकता है आप यह भी, वह भी, और 300 बेकार details भी customize करना चाहें”
    असल में चाहिए था functionality और presentation को अलग करना। संयोग से 1996 का pure HTML web ठीक यही था। फिर कुछ कल्पना से परे मूर्खतापूर्ण तरीके से भयानक रूप से गलत हो गया, और कोई भी बेहतर नहीं हुआ। इसके बजाय बस shadow effects और internal flexbox जैसी चीज़ें रह गईं
  • दोहराव वाले और कम मौलिक काम का बार-बार reimplement होना सिर्फ developers की समस्या नहीं है। Data entry से accounting और creative work तक, अधिकतर office jobs इसी में आती हैं
    office jobs का बड़ा हिस्सा वही काम बार-बार दोहराना है, और अलग-अलग companies में मूलतः वही tasks अलग-अलग लोग दोहराते रहते हैं

• यह UI designers, और शायद product owners को स्मार्ट और सक्षम दिखाने वाला tool लगता है। लेकिन असली काम पहले की तरह programmers के पास ही जाएगा
  UI designer “demo” दे सकता है, लेकिन यह basic feature app के बाकी हिस्से से कैसे जुड़ेगा? नहीं जुड़ेगा

  • यह पक्का ऐसी मज़ेदार और productive बातचीत की ओर ले जाएगा: “वह तो वहीं चल रहा है! उसे app में डालने में इतना समय क्यों लग रहा है? बस download नहीं कर सकते?”
    GPT से पहले से ही यह तर्क था कि बहुत शुरुआती prototypes या mockups को उनकी internal functionality के स्तर के अनुपात में visually भी कम polished दिखना चाहिए। सुंदर और ऊपर से “चलती हुई” लगने वाली UI-only prototypes, साफ-साफ समझाने के बाद भी unrealistic expectations बनाती हैं और prototype के सीधे production बन जाने वाली proto-duction की संभावना बढ़ाती हैं
  • मुझे designers का Figma में final product जैसा दिखने वाला UI दिखाना पसंद नहीं है। Executives की नज़र में वह finished product जैसा दिखता है, जिससे UI design के iterative process में unrealistic expectations घुस आती हैं
    मैंने कई projects देखे हैं जहाँ किसी executive द्वारा approve किए गए Figma design की constraints के कारण घटिया system design engineers पर थोप दिया गया। बेशक ऐसी organizations में और भी बड़ी समस्याएँ होती हैं, लेकिन आसानी से बनने वाले high-fidelity mockups ने wireframes की तुलना में इस समस्या को और बिगाड़ा
  • तरीका आसान है। GPT-4 को नया prompt दे दीजिए: "Thanks. Please connect it to the rest of this code:"
    अगर इससे और अच्छा काम करवाना हो तो "it's very important for my career" भी जोड़ दीजिए

• box को enlarge और rotate करने वाला demo बनाने वाले developers की नौकरी अब जाती दिख रही है

  • सिर्फ उन लोगों की, जो sliders align भी नहीं कर पाते

• customer के साथ यह discuss कर रहा था कि हमारे software को उनके software में कैसे integrate किया जाए, तभी customer ने main form का screenshot भेजा
  मैंने वह screenshot ChatGPT में डाला और कहा, “इस तरह का React form Bootstrap से बना दो।” कुछ adjustments के बाद मैंने अपना software जोड़ा, और कुछ घंटे बाद system इतनी जल्दी integrate हो गया देखकर customer उस proof of concept से हैरान था। Web development में CSS layout समस्या हो तो मैं screenshot ChatGPT पर upload करके समाधान पूछ लेता हूँ; tweet का demo भी काफी similar लगता है

  • basic form page बनाना तो शुरू से सरल रहा है। हैरानी की बात यह है कि करीब 25 साल की web development के बाद भी हम नए web frameworks बनाते रहे और इसे ज़रूरत से ज्यादा complex बनाते रहे
    ऐसे frameworks आते रहे जो fancy use cases में शानदार हैं, लेकिन आम और basic tasks के लिए overkill हैं। कुछ exceptions भी कभी-कभी थीं, लेकिन ज़्यादातर web developers उन्हें पसंद नहीं करते। resume में भी वे cool नहीं दिखते, और सच कहें तो पूरी career में web forms ही बनाते रहना कौन चाहता है
  • customer पहली बार speed देखकर प्रभावित होगा। दूसरी बार वह उसी speed की उम्मीद करेगा। तीसरी बार जब requirements इतनी बढ़ जाएँगी कि ChatGPT संभाल न पाए, तो वह schedule explode होने पर नाराज़ होगा
  • अगर customer से email या chat पर बात हो रही थी, तो कल्पना कर सकते हैं कि customer भी ChatGPT से पूछ रहा होगा कि अपनी requirements आपको सबसे अच्छे तरीके से कैसे बताए
    आखिरकार यह turtles all the way down ही है :+)
  • लेकिन हो सकता है customer अपना data ChatGPT के सामने expose न करना चाहता हो
  • CSS layout issue का screenshot ChatGPT पर upload करके fix करवाना एक neat idea है, जिसके बारे में मैंने सोचा नहीं था। आम तौर पर मैं CSS इतना संभाल लेता हूँ कि dev tools में fix करके styles को code में ले आऊँ, लेकिन यह याद रखने लायक है
    Coding के लिए मैंने ChatGPT से ज्यादा command-line pipes या Bash scripts से data जल्दी process करने में इसका इस्तेमाल किया है। command output देकर desired formatting, aggregation, sorting, extraction के लिए Bash माँगने से debugging या hypothesis-checking जैसे वे काम भी आसान हो जाते हैं जिन्हें पहले शायद करता ही नहीं। manually भी कर सकते हैं, लेकिन धीमा है और options/arguments याद रखने के लिए search या man pages चाहिए होते हैं। code के लिए मैं मुख्यतः GH Copilot इस्तेमाल करता हूँ

• आप मुझे संदेहवादी कह सकते हैं, लेकिन मैं no-code solutions के भविष्य पर भरोसा नहीं करता। छोटे device resolutions पर buttons align करने पड़ते हैं, दूसरी भाषाओं में भी अच्छा दिखे इसलिए whitespace छोड़ना पड़ता है, और दूसरी requirements भी लगातार आती रहती हैं
  ज़्यादा से ज़्यादा यह ऐप्स को किसी और ज़्यादा abstracted language में तेज़ी से बनाने में मदद करेगा। यह tic-tac-toe जैसी बेहद basic और आम चीज़ों के लिए काम करता है, लेकिन मौलिक कामों के लिए फिट नहीं बैठता

  • LLM-based no-code की बड़ी समस्या यह है कि output non-deterministic होता है, इसलिए अंत में सिर्फ़ output itself को ही version control में डाल सकते हैं
    कल्पना कीजिए कि हल्की-फुल्की तकनीकी समझ रखने वाले दर्जनों लोग sketches बनाते हैं और “असल में बना दो” दबाकर features जोड़ते हैं। हर कोई सैकड़ों lines का code बना देता है। दिन के अंत में किसी को उस output को समझना पड़ेगा, और output non-deterministic होने की वजह से हमारे पास बचता भी वही है
  • यह Autotune जैसा है। जो कारीगर सुर में गा सकते हैं, वे दिलचस्प चीज़ें बनाते रहेंगे
    साथ ही, नए लोग जिन्होंने सुर में गाना सीख नहीं पाया या सीखना नहीं चाहा, वे बहुत कम मेहनत में पूरी तरह नए music genres और mainstream pop बनाएंगे। कारीगर भी अपने कुछ workflows को मजबूत करने, polish बढ़ाने और speed लेने के लिए कभी-कभार इसका इस्तेमाल करेंगे
  • ऐसे demos में से कई pure no-code approach को आगे बढ़ाने के बजाय, लगभग तुरंत काम करने वाला wireframe बना सकने की क्षमता दिखाने जैसे हैं
    लगता है Canva, Figma जैसे tools इस तरह की features को aggressively adopt करेंगे और high-fidelity wireframes और demos को काफ़ी बेहतर करेंगे
  • मेरा पहला instinct भी यही था। customization और integration पूरी तरह nightmare होंगे। हालांकि prototyping के लिए यह शानदार है
  • या तो LLM/AI perfect हो जाएंगे, या फिर हम ऐसे code और frameworks इस्तेमाल करना शुरू करेंगे जिन्हें LLM/AI कहीं ज़्यादा आसानी से इस्तेमाल कर सकें

• Squarespace, Wix वगैरह पहले ही market का lower end ले चुके हैं, और अगर वे नहीं लेते तो Indian outsourcing ले लेती
  यह उसी concept का natural evolution है। अगर मैं किसी website builder का product manager होता, तो इस तरह के AI builder integration पर तुरंत लग जाता। यह कम परिभाषित complex business tasks के लिए कभी काम नहीं करेगा, लेकिन photography business के लिए cost calculator जैसी चीज़ अच्छी तरह बना सकेगा

  • ज़्यादातर small businesses के पास अभी भी app या website नहीं है, या है भी तो अक्सर बेकार है। niche markets और अच्छे tools के लिए जगह बहुत बड़ी है
  • ideas को तेज़ी से iterate करने के लिए interactive demos और prototypes बनाने के tool के रूप में यह उपयोगी लगता है। customers के साथ feedback loop छोटा रखा जा सकता है और misunderstandings घटाई जा सकती हैं। उदाहरण के लिए, Figma शायद ऐसा implement कर सकता है
  • समझ नहीं आता कि लोग क्यों सोचते हैं कि यह सिर्फ़ trivial tasks के लिए ही चलेगा। यह denial जैसा है
    business process workflow software काफ़ी popular है। बहुत-से apps हैं जिनमें लोग drag-and-drop या interactive widget editors से मिलते-जुलते काम करते हैं, और वे complex forms, parent-child relationships, state transitions भी संभाल सकते हैं। GPT Vision जैसी चीज़ इस्तेमाल करें तो widget drag-and-drop छोड़कर ज़्यादा free-form drawing tool या hand-drawn sketches इस्तेमाल किए जा सकते हैं। आज का सबसे popular example शायद Notion है, और उससे बहुत पहले से कहीं ज़्यादा complex examples भी मौजूद थे

• अब खुद को बूढ़ा महसूस कर रहा हूँ। दशकों पहले भी VB या Delphi से लगभग इसी speed पर यह किया जा सकता था। बस tool के label names से infer करने के बजाय result थोड़ा ज़्यादा deterministic होता था
  हमारे पास यह पहले से था, और हम यह भूल गए कि सब कुछ browser में ठूँसे बिना और generative AI models की भारी computation इस्तेमाल किए बिना भी यह हो सकता था। बादलों पर चिल्लाते बूढ़े जैसा महसूस हो रहा है

  • मेरी भी मिलती-जुलती सोच है। थोड़ा और provocatively कहूँ तो, जब लोग AI से Figma को HTML में बदलना दिखाते हैं, तो मैं कहता हूँ “क्या आपने Dreamweaver के बारे में सुना है?”
    बेशक Dreamweaver code बदसूरत और लगभग बेकार स्तर का था, और AI-generated code कभी-कभी इतना खराब नहीं होता। फिर भी लगता है हम आज की स्थिति के काफी करीब पहले ही पहुँच चुके थे
  • यह browser की समस्या नहीं है, बल्कि framework के opinionated design की ताकत की समस्या है
    VB बहुत opinionated tool था और सिर्फ़ native Windows style UI बनाता था। designer द्वारा लाए गए किसी arbitrary mockup या पूरी तरह custom look-and-feel को pixel-by-pixel VB में replicate करने की बात नहीं थी। आज ज़्यादातर product GUIs brand का हिस्सा हैं। अच्छा हो या बुरा, हर company unique look-and-feel और UI behavior चाहती है। इसलिए बनाने वाले tools को कहीं ज़्यादा complex होना पड़ता है। browser में भी VB को recreate किया जा सकता है और सच में कई लोगों ने वैसा बनाया भी है, लेकिन companies boring और generic UI नहीं चाहतीं, इसलिए product development में उसका ज्यादा इस्तेमाल नहीं होता
  • point समझ आता है, लेकिन यह सिर्फ़ सबसे simple examples पर लागू होता है। यह tool कई चीज़ें कर सकता है। उस thread को और देखें तो tic-tac-toe भी implement करता है
    मूल रूप से यह diagram screenshot को GPT-4 पर भेजकर “इसे implement कर दो” कहने के तरीके से काम करता है
  • बहुत पहले Comdex graphics pavilion में अगला कदम बताकर एक नया-सा operating system दिखाया जा रहा था। कोई विशाल nerd mouse से इधर-उधर चीज़ें drag-and-drop कर रहा था और “prove” कर रहा था कि application बनाने के लिए programmer होना ज़रूरी नहीं है
    उसके 10 साल बाद Visix Vibe नाम की कोई चीज़ 1–2 साल तक घूमती रही, जो उस समय की अपेक्षाकृत नई language Java के लिए यही देने का दावा करती थी। हर कुछ साल में, लगभग 4–5 साल या 10 साल में एक बार, कोई न कोई सारी complexity गायब कर देना चाहता है। लेकिन अंत में वे operating system ही बना बैठते हैं
  • major native UI toolkits इस्तेमाल करें तो आज भी ऐसी चीज़ें दिखती हैं। हो सकता है यह RAD जितनी तेज़ न हों, लेकिन web में custom और आम तौर पर fragile JavaScript मांगने वाले तमाम elements और interactions यहाँ “free” में मिल जाते हैं
    और वे सच में ठीक से काम करते हैं, बाकी toolkit के साथ expected तरीके से interact करते हैं, और internationalization तथा accessibility भी लगातार अच्छे से काम करते हैं। कोई वजह नहीं कि HTML default रूप से इससे कहीं ज़्यादा काम न कर सके, और ऐसा करने से हर साल developers का भारी समय और users की frustration बच सकती है। लेकिन बस ऐसा किया नहीं जाता