screenshot2html

מה זה

האפליקציה מקבלת תמונה של עמוד אינטרנט ופולטת שני דברים במקביל: תיבת קוד עם ה־HTML שנוצר, ותמונה מרונדרת של התוצאה בפועל. הרינדור הזה מתבצע מאחורי הקלעים באמצעות דפדפן Playwright, שמצלם את הקוד שיצא ומציג לכם איך הוא נראה בזמן אמת, כך שלא צריך להעתיק את הטקסט לעורך חיצוני רק כדי לבדוק אם הוא עובד.

מתחת למכסה המנוע רץ המודל HuggingFaceM4/VLM_WebSight_finetuned, שמבוסס על עיבוד תמונה מובנה של Transformers ומייצר קוד ברצף. בממשק יש גם גלריית תבניות מוכנות מראש, שמאפשרת לבחור עיצוב בלחיצה אחת ולראות מיד איך המודל מתמודד עם דוגמאות שהוא כבר מכיר במקום להעלות קובץ משלכם.

מתאים ל

• שחזור שלד לאתר קיים

  מעלים צילום של עמוד ישן כדי לחלץ מבנה HTML ראשוני וסגנון CSS בלי להתחיל מאפס.

• בדיקת יכולות המודל

  בוחרים דוגמה מהגלריה המובנית כדי לראות איך המודל מפרש פריסות מסך שונות.

• יצירת תבנית מסקיצה גרפית

  מזינים צילום מסך של עיצוב נקי כדי לקבל תרגום מהיר לבלוקים של קוד.

איפה זה נופל

המודל מייצר קוד סטטי בלבד ולא בונה אתר חי עם פונקציונליות או לוגיקה מורכבת. התצוגה המקדימה היא תמונה בלבד ולא רכיב HTML אינטראקטיבי, כך שאי אפשר ללחוץ על כפתורים, לבדוק קישורים או לבחון התנהגות רספונסיבית. אם צילום המסך כולל טקסטים בעברית, עימוד מימין לשמאל או רכיבי ממשק מורכבים במיוחד, התוצאה עלולה להישבר או לייצר מבנה אלמנטים מבולגן שדורש שכתוב ידני נרחב.

איך משתמשים

גוררים צילום מסך לאזור ההעלאה בצד שמאל, או לוחצים על אחת הדוגמאות בגלריה, ולוחצים על כפתור השליחה. אין צורך בהרשמה או בהזנת מפתח API. הריצה מתבצעת על חומרת zero-a10g שמקצה מאיץ גרפי לפי דרישה, ולכן ייתכן שתמתינו כמה שניות עד שהמשאב מתעורר אם הוא לא היה פעיל. לאחר מכן המודל פולט את הקוד בתהליך הזרמה, ויש כפתור ייעודי שמייצר את התוצאה מחדש אם הגרסה הראשונה לא יצאה מדויקת.

הרישיון

הרישיון של המרחב לא דווח. המשמעות היא שאין תנאי שימוש מוגדרים וברורים לגבי שימוש מסחרי בקוד שנוצר, ואין התחייבות רשמית לגבי האופן שבו התמונות שאתם מעלים נשמרות או מעובדות בשרת.

הרישיון המלא ב־Hugging Face ↗