gemini-image-to-code
רץ בדפדפןTrudyרישיון לא דווח2025-01-23
מעלים תמונה ומקבלים קוד אינטראקטיבי ב־p5.js שמנסה לתפוס את התנועה שלה. זה מיועד למפתחים שרוצים סקיצות יצירתיות ולא ממשקי ווב רגילים.
- —הורדות בחודש
- 56לייקים
מה זה
מעלים קובץ תמונה בפורמטים שונים ומקבלים קוד שנוצר מול העיניים, לצד תצוגה מקדימה וצביעת תחביר. למרות שבתיאור הכללי נכתב שמקבלים HTML ו־CSS, הפרומפט בפועל מכוון את המודל לכתוב סקריפט בודד של p5.js שמגיב לעכבר.
מאחורי הקלעים רץ המודל Gemini Pro Vision, ובחלק אחר מוזכר גם Gemini 2.0. המודל מתבקש לנתח תכונות התנהגותיות של העצם שבתמונה, להגדיר תיחום קומפוזיציה ולהתאים אלגוריתם מוכר כמו סימולציית להקה, עץ פרקטלי או גלים במים.
דוגמאות הפרומפט כוללות תמונת רוכסן שהופכת להדמיה שנפתחת בגרירת עכבר, ציפורים שעוקבות אחרי הסמן, מנורה שנדלקת בלחיצה או שעון יד שמתחבר לזמן המערכת.
מתאים ל
- אנימציה אינטראקטיבית
הפיכת תמונת נוף או טבע לסקיצה מונפשת שמגיבה לתנועות העכבר של הגולש.
- הדגמות קוד יצירתי
בניית שעון חי או עץ פרקטלי מבוססי תמונת מקור לצורכי למידה ושעשוע.
- השראה ויזואלית
בדיקת רעיונות לתרגום תמונות סטטיות לאלגוריתמים גרפיים מוכרים.
איפה זה נופל
ההבטחה לקוד HTML ו־CSS מטעה, כי ההנחיות הפנימיות כופות יצירת קוד יצירתי ב־p5.js בלבד. לא תקבלו פה תבנית לאתר או רכיב ממשק שמיש לאפליקציה.
המודל מונחה להחזיר קוד עצמאי לחלוטין בלי לייבא ספריות עזר נוספות, מה שמגביל מאוד את מורכבות התוצאה. מעבר לזה, אם תריצו אותה מקומית, תצטרכו לספק מפתח API משלכם ולשאת בעלויות שלו.
שאלות
נפוצות
האם זה בחינם?
הקוד פתוח לחלוטין, אך כרגע הדף ברשת מציג שגיאת ריצה ולא זמין לשימוש ישיר. אם תבחרו להריץ אותו אצלכם, תצטרכו להזין מפתח API פרטי של גוגל שדורש חשבון נפרד ועשוי לעלות כסף לפי תעריפי השימוש שלהם.
מה קורה עם הקבצים שלי?
התמונות שאתם מעלים נשלחות לעיבוד דרך ה־API של Google Gemini. הטיפול במידע ובפרטיות הקבצים תלוי במדיניות הנתונים של גוגל ובתנאי השימוש במפתח שהוגדר, ולא נשמר בשום שרת מקומי של הפרויקט עצמו.
במה זה שונה משימוש ישיר במודל?
האפליקציה חוסכת מכם כתיבת פקודות ומצמידה פרומפט קבוע שמכוון את המודל לכתוב קוד p5.js אינטראקטיבי. נוסף על כך, הממשק מחלץ את הקוד מהתשובה, מציג אותו עם הדגשת תחביר ומריץ אותו בחלון תצוגה מקדימה.
האם אפשר להריץ אותה מקומית?
כן, אפשר להוריד את הקוד ולהריץ אותו במחשב בעזרת Node.js ופקודות npm dev פשוטות. לחלופין, הפרויקט כולל קובץ דוקר שאפשר לבנות ולהריץ על פורט 7860, כל עוד תעבירו את מפתח ה־API המתאים בהגדרות הסביבה.
איך משתמשים
נכון לעכשיו אי אפשר להשתמש בה ישירות ברשת כי השרת שלה במצב של שגיאת ריצה. כשהיא מתפקדת, מעלים תמונה אל הממשק וממתינים לתשובה שמגיעה מה־API של גוגל.
המערך יושב על מעבד בסיסי, אבל זמן ההמתנה תלוי בעיקר בקריאה החיצונית למודל של גוגל. כדי להריץ את העסק עצמאית תצטרכו לשכפל את הקוד, להתקין תלויות npm או לבנות קונטיינר בדוקר, ולהגדיר מפתח אישי תחת GEMINI_API_KEY.
הרישיון
הפרויקט עצמו מוגדר ברישיון Apache-2.0 בקובץ ההסבר, למרות שבנתוני המערכת נרשם שלא דווח רישיון. הרישיון מאפשר שימוש חופשי ושינוי של הקוד, אך השימוש בפועל כפוף למדיניות של גוגל לגבי המודל Gemini ולתנאי מפתח ה־API שלכם.