मैंने Gemini का उपयोग करके RenderCV के लिए एक लाइव वेब एडिटर कैसे बनाया

कोड के रूप में रिज्यूमे: RenderCV की भव्यता

यदि आप एक इंजीनियर या शिक्षाविद हैं, तो एमएस वर्ड में रिज्यूमे लिखना एक दुःस्वप्न है, और कस्टम LaTeX टेम्पलेट अक्सर बनाए रखने के लिए बहुत जटिल होते हैं।

हाल ही में, मुझे RenderCV नामक एक शानदार पायथन प्रोजेक्ट मिला। यह आपको एक साफ, संरचित YAML फ़ाइल में अपने रिज्यूमे की सामग्री लिखने की अनुमति देता है और बैकएंड में Typst का उपयोग करके सही टाइपोग्राफी के साथ एक खूबसूरती से स्वरूपित PDF उत्पन्न करता है। यह आपके रिज्यूमे को कोड की तरह मानता है, जिसका अर्थ है कि आप इसे संस्करण-नियंत्रित (version-control) कर सकते हैं, पूरी तरह से सामग्री पर ध्यान केंद्रित कर सकते हैं, और टूल को पेज मार्जिन, संरेखण (alignment) और स्टाइलिंग को संभालने दे सकते हैं।

हालाँकि, RenderCV को मुख्य रूप से कमांड-लाइन इंटरफ़ेस (CLI) टूल के रूप में डिज़ाइन किया गया था। हर बार जब आप कोई बदलाव करते हैं, तो आपको rendercv render John_Doe_CV.yaml चलाना होता है, आउटपुट की जांच करनी होती है, PDF व्यूअर खोलना होता है, और संरेखण की जांच करनी होती है। यदि आप कोई सत्यापन (validation) या स्कीमा त्रुटि करते हैं, तो आपको CLI कंपाइलर ट्रेसबैक को पढ़ना होगा।

मैं एक लाइव वेब एडिटर (Live Web Editor) जोड़कर इस अंतर को पाटना चाहता था—एक स्थानीय सिंगल-पेज वेब ऐप जिसमें साइड-बाय-साइड मोनाको एडिटर (Monaco editor), लाइव PDF पूर्वावलोकन, तत्काल स्कीमा सत्यापन और इंटरैक्टिव थीम/अनुभाग टॉगल की सुविधा हो।

Gemini की मदद से, मैंने इस वेब इंटरफ़ेस को सफलतापूर्वक बनाया और सीधे RenderCV में एकीकृत किया! यहाँ बताया गया है कि हमने इसे कैसे किया।

टेक स्टैक और आर्किटेक्चर

वेब एडिटर को हल्का, तेज़ और न्यूनतम-निर्भरता वाला रखने के लिए, हमने चुना:

  1. बैकएंड: FastAPI + Uvicorn — उच्च-प्रदर्शन वाले API लिखने और स्थिर संपत्तियों की सेवा के लिए एकदम सही।
  2. फ्रंटएंड: वैनिला HTML5 + आधुनिक CSS + जावास्क्रिप्ट — एक स्थानीय CLI सहायक के लिए भारी बिल्ड चरणों (जैसे Webpack या Vite) से बचते हुए। हमने एक बेहतरीन YAML लेखन अनुभव के लिए Monaco Editor (CDN के माध्यम से) और आसान विज़ुअल तत्वों के लिए Lucide Icons का उपयोग किया।
  3. रेंडरिंग: RenderCV Python API — इन-मेमोरी या अस्थायी निर्देशिकाओं के भीतर Typst और PDF दस्तावेज़ों को पार्स करने, सत्यापित करने और बनाने के लिए सीधे लाइब्रेरी के आंतरिक मॉडल को कॉल करना।

1. FastAPI बैकएंड डिज़ाइन करना (web_app.py)

सर्वर का मुख्य भाग /api/render एंडपॉइंट है। जब उपयोगकर्ता वेब UI में YAML टाइप करता है, तो फ्रंटएंड इसे इस एंडपॉइंट पर भेजता है। बैकएंड तीन प्रमुख कार्यों को संभालता है:

  1. PDF रेंडर करना: हम RenderCV के आंतरिक संकलन कार्यों का उपयोग करके YAML स्ट्रिंग को संकलित करते हैं और कच्चे PDF बाइट्स लौटाते हैं।
  2. अनुभाग दृश्यता टॉगल करना: RenderCV आपको अपने CV के अनुभागों को छिपाने या दिखाने की अनुमति देता है। हम आने वाले YAML को पार्स करते हैं, सभी उपलब्ध CV अनुभागों की पहचान करते हैं, उन अनुभागों को हटाते हैं जिन्हें उपयोगकर्ता ने UI ड्रॉपडाउन में छिपाने के लिए चुना है, और अंतिम दस्तावेज़ को संकलित करते हैं।
  3. संरचित त्रुटि मैपिंग: जब सत्यापन विफल हो जाता है, तो RenderCV एक RenderCVUserValidationError फेंकता है। हम इस त्रुटि को रोकते हैं, अमान्य YAML फ़ील्ड के सटीक लाइन और कॉलम नंबर निकालते हैं, और एक साफ JSON त्रुटि प्रतिक्रिया लौटाते हैं ताकि मोनाको एडिटर त्रुटि की सटीक स्थिति पर लाल रंग की रेखाएं प्रदर्शित कर सके!

यहाँ पायथन में /api/render एंडपॉइंट कैसा दिखता है:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
@app.post("/api/render")
def render_pdf(request: RenderRequest):
    """प्रदान किए गए YAML को PDF में संकलित करें और PDF फ़ाइल बाइट्स लौटाएं।"""
    with tempfile.TemporaryDirectory() as tmpdir:
        tmp_path = pathlib.Path(tmpdir)
        try:
            # YAML को RenderCV के आंतरिक शब्दकोश में पार्स करें
            input_dict, overlay_sources = build_rendercv_dictionary(
                request.yaml,
                output_folder=tmp_path,
                dont_generate_png=True,
                dont_generate_markdown=True,
                dont_generate_html=True,
            )
            
            # UI पर वापस जाने के लिए सभी अनुभाग निकालें
            all_sections = []
            if "cv" in input_dict and "sections" in input_dict["cv"] and input_dict["cv"]["sections"]:
                all_sections = list(input_dict["cv"]["sections"].keys())
                
            # छिपे हुए अनुभागों को प्रोग्रामेटिक रूप से हटाएँ
            if request.hide_sections:
                for sec in request.hide_sections:
                    if "cv" in input_dict and "sections" in input_dict["cv"] and input_dict["cv"]["sections"]:
                        input_dict["cv"]["sections"].pop(sec, None)
            
            # मॉडल को सत्यापित करें और बनाएं
            model = build_rendercv_model_from_commented_map(input_dict, tmp_path, overlay_sources)
            
            # Typst स्रोत कोड उत्पन्न करें और PDF में संकलित करें
            typst_path = generate_typst(model)
            pdf_path = generate_pdf(model, typst_path)
            pdf_bytes = pdf_path.read_bytes()
            
            # हेडर में अनुभाग सूची भेजें (URL-एन्कोडेड JSON)
            headers = {
                "X-RenderCV-Sections": urllib.parse.quote(json.dumps(all_sections)),
                "Access-Control-Expose-Headers": "X-RenderCV-Sections"
            }
            return Response(content=pdf_bytes, media_type="application/pdf", headers=headers)
            
        except RenderCVUserValidationError as e:
            # Pydantic सत्यापन त्रुटियों को वापस YAML संपादक निर्देशांकों पर मैप करें
            errors = []
            for err in e.validation_errors:
                start_line = err.yaml_location[0][0] if err.yaml_location else None
                start_col = err.yaml_location[0][1] if err.yaml_location else None
                errors.append({
                    "message": err.message,
                    "line": start_line,
                    "col": start_col,
                    "schema_location": err.schema_location
                })
            return JSONResponse(
                status_code=422,
                content={"type": "validation_error", "detail": "YAML सत्यापन विफल रहा", "errors": errors}
            )
        # ... अन्य त्रुटि प्रबंधन

2. एक प्रीमियम वेब इंटरफ़ेस (index.html)

यूज़र इंटरफ़ेस के लिए, हम कुछ ऐसा चाहते थे जो प्रीमियम, उत्तरदायी (responsive) और पूरी तरह से आकर्षक लगे। Gemini ने मुझे एक सुंदर आधुनिक लेआउट कोड करने में मदद की जिसमें शामिल हैं:

  • HSL डार्क थीम: गहरी स्लेट पृष्ठभूमि, अर्ध-पारदर्शी ओवरले (backdrop-filter: blur), और जीवंत बैंगनी रैखिक-ढाल (linear-gradient) लहजे।
  • साइड-बाय-साइड स्प्लिटस्क्रीन: बाईं ओर मोनाको एडिटर, दाईं ओर लाइव PDF व्यूअर (स्थानीय ब्लॉब URL के साथ लोड किए गए एक <iframe> का उपयोग करके)।
  • गतिशील नियंत्रण:
    • टेम्पलेट (classic, engineering, moderncv, आदि) लोड करने और आपके वर्तमान CV डेटा को स्वचालित रूप से उनमें मर्ज करने के लिए एक थीम स्विचर ड्रॉपडाउन।
    • एक अनुभाग ड्रॉपडाउन जो बैकएंड हेडर को क्वेरी करता है और रिज्यूमे अनुभागों को गतिशील रूप से छिपाने/दिखाने के लिए चेकलिस्ट बनाता है (जैसे आपके CV के लक्षित संस्करणों को निर्यात करते समय “प्रोजेक्ट्स” या “संदर्भ” छिपाना)।
    • संपादक के निचले भाग में एक इनलाइन सत्यापन लॉग कंसोल जो त्रुटि विवरण दिखाने के लिए विस्तृत होता है। किसी भी सत्यापन त्रुटि पर क्लिक करने से मोनाको संपादक में लाइन स्वचालित रूप से हाइलाइट और केंद्रित हो जाती है।

संकलित करने के लिए, उपयोगकर्ता या तो “रेंडर PDF” बटन पर क्लिक कर सकता है या कीबोर्ड शॉर्टकट Cmd + Enter का उपयोग कर सकता है। PDF एक सेकंड से भी कम समय में संकलित हो जाता है!

3. इसे CLI में लपेटना (web_command.py)

उपयोगकर्ताओं के लिए शुरुआत करना अविश्वसनीय रूप से आसान बनाने के लिए, हमने Typer-आधारित RenderCV CLI में एक नया कमांड जोड़ा है:

1
rendercv web

यह स्थानीय Uvicorn FastAPI सर्वर लॉन्च करता है और आपके वेब ब्राउज़र को स्वचालित रूप से खोलता है:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@app.command(
    name="web",
    help="लाइव संपादन और PDF संकलन के लिए RenderCV वेब संपादक शुरू करें।"
)
@handle_user_errors
def cli_command_web(
    host: str = "127.0.0.1",
    port: int = 8000,
    no_browser: bool = False,
):
    typer.echo(f"http://{host}:{port} पर RenderCV वेब संपादक शुरू किया जा रहा है")
    
    if not no_browser:
        def open_browser():
            time.sleep(1.2)
            webbrowser.open(f"http://{host}:{port}")
            
        threading.Thread(target=open_browser, daemon=True).start()

    uvicorn.run(web_app, host=host, port=port)

Gemini के साथ कोडिंग पर विचार

Gemini के साथ इस सुविधा का निर्माण असाधारण रूप से तेज़ था। जिस काम में सामान्य रूप से आंतरिक स्रोत कोड पढ़ने और मोनाको API कॉन्फ़िगरेशन को कॉन्फ़िगर करने में दिन लग जाते, वह कुछ ही घंटों में हल हो गया:

  1. AST/YAML लाइब्रेरी को समझना: Gemini ने सही ढंग से पहचान की कि थीम बदलते समय उपयोगकर्ता के उद्धरण (quotes), टिप्पणियों और संरचना को संरक्षित करने के लिए हमें YAML फ़ाइल को पार्स करने के लिए ruamel.yaml का उपयोग करना चाहिए।
  2. त्रुटि मैपिंग: Gemini ने पता लगाया कि कैसे RenderCVUserValidationError निर्देशांक को पार्स किया जाए और मोनाको सत्यापन मार्कर पेलोड (monaco.editor.setModelMarkers) का निर्माण किया जाए ताकि संपादक पूरी तरह से Pydantic सत्यापन के साथ सिंक्रनाइज़ हो सके।
  3. UX को चमकाना: इसने CSS वेरिएबल्स और लेआउट ऑफ़सेट तैयार किए जो भव्य दिखते हैं, कई स्क्रीन रिज़ॉल्यूशन में अच्छी तरह से स्केल करते हैं, और सुपर रेस्पॉन्सिव हैं।

यदि आप रिज्यूमे लिखते हैं, तो RenderCV पर जाएं—और लाइव एडिटर का स्वयं अनुभव करने के लिए rendercv web चलाने का प्रयास करें!

हैप्पी कोडिंग!