Vibe Coding से एक सरल नोट एक्सटेंशन बनाकर देखा

परिचय

जैसा कि शीर्षक में है, मैंने एक सरल नोट ऐप बनाकर देखा जिसे ब्राउज़र के Side panel में खोलकर इस्तेमाल किया जा सकता है.
शुरुआत में इसे सिर्फ अपने इस्तेमाल के लिए शुरू किया था, लेकिन पहले 3 दिनों में जो नतीजा सामने आया उसे देखकर लगा कि इसे यहां साझा करना भी अच्छा रहेगा, इसलिए एक हफ्ते तक bug fix और feature जोड़ने के बाद यह पोस्ट लिख रहा हूँ.

इस्तेमाल का तरीका और इसकी विशेषताएँ इस प्रकार हैं:

• Alt+Shift+W शॉर्टकट से नोट ऐप चलाना
• Markdown सिंटैक्स में मेमो लिखना संभव
• डबल-क्लिक से Edit विंडो में प्रवेश, ESC या Shift+Enter से preview mode में स्विच
• लिखते समय line break (लाइन के अंत में 2 spaces जोड़ना) को अपने आप संभालता है (On/Off संभव)
• बाहरी टेक्स्ट paste करते समय line break और ~ अक्षर को ￦~ में बदलकर टेक्स्ट टूटने से बचाता है (On/Off संभव)
• Ctrl+V से image paste करना संभव
• मनचाहे नोट्स को ऊपर pin करके रखा जा सकता है
• dark mode सपोर्ट

लगभग इतना ही है.

विकास की प्रेरणा

हो सकता है नोट ऐप खोलने वाला शॉर्टकट देखकर कुछ लोगों ने समझ लिया हो, लेकिन यह प्रोग्राम 5 साल पहले development बंद हो चुके Notes by Firefox एक्सटेंशन से, शॉर्टकट और design सहित, काफी प्रभावित है.
लेकिन development बंद हुए कई साल बीत जाने के बाद Korean input अजीब तरह से काम करने लगा, और Firefox खुद भी Chrome की तुलना में ज्यादा memory खाता था, इसलिए इसी तरह का एक्सटेंशन खुद बनाकर देखने की प्रेरणा मिली.

विकास परिवेश

AI के लिए मैंने Gemini CLI और Gemini web page, दोनों का साथ में इस्तेमाल किया.
जहाँ design ज्यादा महत्वपूर्ण नहीं था वहाँ मैंने मुख्य रूप से Gemini CLI का इस्तेमाल किया, और web का इस्तेमाल स्क्रीनशॉट दिखाकर design elements समायोजित करने या तब किया जब Gemini CLI किसी खास गलत जवाब पर अटक जाता था और उससे बाहर नहीं निकल पाता था.

दोनों ही मामलों में मॉडल को gemini-2.5-pro के official version पर fixed रखा, और dashboard देखने पर पता चला कि सिर्फ Gemini CLI में डाले गए input tokens ही लगभग 10 करोड़ tokens के करीब पहुँच गए थे.

Version control के लिए git का इस्तेमाल किया ताकि अगर AI कोड को अजीब तरह से खराब कर दे तो पिछला version वापस लाया जा सके. काम करते समय मैंने यह चक्र दोहराया: command -> Gemini CLI द्वारा code लिखना -> Gemini CLI द्वारा commit -> बदले हुए code और परिणाम की manual review -> command.

आगे की योजना

फिलहाल सबसे पहले, मौजूदा स्थिति जिसमें सारा JavaScript code एक ही file में है, उससे बाहर निकलकर code को कई files में बाँटकर module format में लोड करने लायक एक बड़ा refactoring करने की योजना है, ताकि maintenance आसान हो सके.
शुरुआत में यह सिर्फ एक सरल text memo के रूप में शुरू हुआ था, इसलिए सारा code एक single file में ठूँस दिया था, लेकिन आकार बढ़ने के साथ code को पढ़ना और सीधे संशोधित करना मुश्किल होने लगा.

और जिन features को आगे जोड़ना चाहता हूँ, उनमें complete WYSIWYG memo support, formula input और rendering support, और Markdown के अलावा plain text या HTML आधारित memo लिखने की सुविधा शामिल हैं.
खासकर WYSIWYG support से memo लिखते समय उपयोगिता काफी बढ़ेगी, इसलिए refactoring खत्म होने के बाद सबसे पहले उसी को implement करने की कोशिश करूँगा.

और अगर समय मिला, तो शायद इसे Firefox में भी इस्तेमाल करने लायक port करके addon के रूप में जारी करूँ.

समापन

मैं आम तौर पर छोटे-मोटे कामों में AI का काफी इस्तेमाल करता रहा हूँ, लेकिन इस आकार के काम में AI को main बनाकर काम करना पहली बार था, और यह उम्मीद से बेहतर चला, जो मुझे सचमुच हैरान करने वाला लगा.
हालाँकि, पता नहीं Gemini CLI में समस्या है या नहीं, लेकिन gemini-2.5-pro को बिना सीमा इस्तेमाल करने के लिए API key लगाकर पैसे देकर ही इस्तेमाल करना संभव है. इस प्रोग्राम को बनाते समय सिर्फ input में ही लगभग 10 करोड़ tokens खर्च हो गए, इसलिए लागत उम्मीद से ज्यादा आना थोड़ा अफसोसजनक था.
Caching होने की वजह से billed amount अनुमानित राशि से कम था, लेकिन इतना ज्यादा उपयोग होगा यह अपेक्षित नहीं था, इसलिए मेरा मानना है कि इस्तेमाल करते समय context summary feature का ठीक से उपयोग करना performance बनाए रखने के लिए जरूरी होगा.

यह अब इतना विकसित हो चुका है कि वास्तविक उपयोग संभव है, लेकिन अभी मेरी सोची हुई सारी सुविधाएँ पूरी तरह लागू नहीं हुई हैं. इसलिए आप इसे आज़माएँ, और यदि कोई सवाल या feedback हो तो बेझिझक बताइए!

[baesku789]

अच्छा लेख, धन्यवाद।
क्या 100 मिलियन token पर लगभग कितना खर्च आया, यह बता सकते हैं?

[ihabis02]

कैशिंग सहित यह लगभग 90,000~100,000 वॉन के आसपास आया लगता है.
Gemini CLI में /stats model कमांड से उपयोग की जाँच करने पर भी cache ratio 50~60% के बीच था, इसलिए हिसाब से भी यह लगभग मेल खाता था।

[baesku789]

बताने के लिए धन्यवाद~!