בשבועיים האחרונים יצאו כמה כלים חדשים שאיתם אפשר לבנות משחקים, אתרים אינטראקטיביים ותוכנות, בלי לכתוב שורת קוד אחת, ובחינם! אז בואו נראה איך עושים את זה...
Websim
עם Websim אפשר לבנות אתרים, אפליקציות אינטראקטיביות ומשחקים תוך שניות באמצעות ״פרומפטים״, כלומר הנחיות לצ׳אטבוט. אחרי שבונים את האתר, אפשר לשתף אותו באמצעות קישור, או להוריד אותו למחשב בתור קובץ HTML. השימוש ב-Websim הוא חינם לגמרי (צריך רק להרשם עם חשבון גוגל), והוא תומך במודלי השפה המתקדמים ביותר - Claude 3.5 Sonnet ו-GPT-4o.
בדף הבית של Websim תוכל לראות את ה-״יצירות״ המובילות של היום, השבוע או החודש (כל מה שתבנו חשוף לכולם, ומקבל דירוג). בראש הדף יש שורה שכתוב בה ״?What would you like to create today" - זה המקום להכניס את הפרומפט שלכם.
בתור דוגמא, יצרתי משחק שנקרא "Angroids", שהוא שילוב בין Angry Birds ל- Asteroids. זה הפרומפט שנתתי לו:
Create a new twist on the classic Asteroids game, where an angry bird is trying to shoot down alien pigs.
כשאתם כותבים פרומפט, תוכלו לבחור באיזה מודל שפה להשתמש. מהבדיקות שעשיתי, מודל ברירת המחדל Claude 3.5 Sonnet נותן את התוצאות הטובות ביותר. אחרי שכותבים את הפרומפט לוחצים על כפתור השליחה, ותוך כמה שניות האתר כבר מוכן.
אם לא קיבלתם תוצאה מספיק טובה בניסיון הראשון, אתם יכולים להוסיף פרומפטים בתיבת הטקסט שבראש הדף. אלה הפרומפטים שאני הוספתי כדי לקבל את המשחק שבתמונה למעלה:
Add a start game button. Make the pigs more realistic. Make the pigs explode into pieces like in the original Asteroids game. Make it work on mobile by swiping and tapping on the screen. Add 3 lives. Add the ability to move forward by pressing the Up arrow as in the original game.
אחרי שאתם מוסיפים פרומפט, לפעמים ה-Progress Bar ממשיך להתקדם לנצח או נתקע, או שהאפליקציה לא עובדת. במקרה כזה, תלחצו על הכפתור 🔄 בראש הדף, והאפליקציה תיווצר מחדש. אם גם זה לא עוזר, כנראה יש עומס גבוה על השרתים של Websim, אז זה הזמן ללחוץ על כפתור הבית 🏠 ולהתחיל שוב עם הפרומפט הראשון.
תוכלו למצוא את המשחק שלי כאן, אבל תיזהרו - הוא ממכר...
Claude Artifacts
כשחברת אנת׳רופיק חשפה את מודל השפה החדש שלה Claude 3.5 Sonnet בחודש שעבר, היא הציגה גם פיצ׳ר חדש בממשק הצ'אט של קלוד שנקרא Artifacts. הפיצ׳ר הזה מייצר מסמכים, גרפיקה, קטעי קוד ואתרים בחלון נוסף לצד הצ'אט, ואפשר לשתף אותם עם משתמשים אחרים של קלוד באמצעות הכפתור Publish. מי שמקבל קישור ל-Artifact יכול להשתמש בו כמו שהוא, או לעשות לו ״רמיקס״, כלומר להוסיף לו עוד פרומפטים כדי לשפר אותו. שימו לב שהפרומטים המקוריים של ה-Artifact לא חשופים למי שמקבל את הקישור.
עכשיו בואו נשתמש באותו פרומפט כדי ליצור את המשחק Angroids עם קלוד.
כמו שאתם רואים, הפרומפט הזה יצר Artifact, אבל ה-Artifact הזה הוא מסמך שמגדיר את התכונות של המשחק, ולא קוד ה-HTML של המשחק עצמו. אז הוספתי את ההנחיה הבאה:
Make a website with this game
זה יצר Artifact של משחק אמיתי, שממש אפשר לשחק בו (אחרי שתלחצו בתוך החלון כדי לשים פוקוס לסמן).
המשחק הזה מאד מאוד בסיסי, ולא דומה בכלל למשחק שמתואר במסמך, אז כתבתי פרומפט נוסף שמבקש מקלוד להוסיף עוד כמה תכונות שחסרות במשחק:
Add a start game button. Make the birds and the pigs much more realistic. Make the pigs explode into smaller pigs that continue to wander in space like the original pigs. Add 3 lives. When a pig collides with the angry bird detect this, reduce the lives by one, and restart the game. When the lives reach 0, declare game over, and show a "Restart Game" button.
ככה נראה המשחק אחרי השינויים האלה:
הרבה יותר טוב! הנה קישור ל-Claude Artifact של הגירסה המעודכנת. עדיין יש כמה באגים - למשל, המשחק מסתיים כשהציפור פוגשת חזיר בפעם הראשונה... אבל בשביל זה יש את תכונת הרמיקס של קלוד - תוכלו להמשיך ולשפר את המשחק בעצמכם.
Poe Previews
אני ממש אוהב את האפליקציה Poe, שמאפשרת לכם לדבר עם כמה צ'אטבוטים בממשק אחד. יש לה פיצ׳רים מעולים כמו יצירת צ'אטבוטים מותאמים אישית, העלאת קבצים ושיתוף שיחות. בזמן האחרון הוסיפו לה פיצ׳ר שנקרא "Previews", שמריץ קוד HTML/CSS/JS שנוצר על ידי אחד הצ'אטבוטים בתוך חלון השיחה. זה דומה מאוד ל-Claude Artifacts, אבל עובד עם כמה צ׳אטבוטים ולא רק עם קלוד.
מנוע השפה GPT-4o הוא אחד ממנועי השפה הטובים ביותר היום, אבל כשמשתמשים בו דרך ChatGPT, אי אפשר להריץ את האפליקציות שהוא כותב ישירות בחלון הצ'אט. אז החלטתי ליצור שוב את אפליקציית Angroids, הפעם עם מודל השפה GPT-4o בממשק של Poe. בניסיון הזה התחלתי עם פרומפט ראשוני הרבה יותר ארוך, כדי לקבל גרסה מלאה יותר של המשחק כבר בניסיון הראשון:
Create a new twist on the classic Asteroids game, where an angry bird is trying to shoot down alien pigs, using web code. The game should have the following features: Start button, score, highly realistic angry bird and pigs, pigs explode into smaller pigs that continue to wander in space like the original pigs, 3 lives, when a pig collides with the angry bird detect this, reduce the lives by one, and restart the game, and when the lives reach 0, declare game over, and show a "Restart Game" button.
הנה השיחה שלי עם Poe:
זה נראה מאוד מבטיח, אבל כשלוחצים על הכפתור מקבלים כמה שגיאות:
מה עושים? פשוט מעתיקים את השגיאות האלה ומדביקים אותן חזרה בחלון הצ'אט של GPT-4o, והוא מעדכן את הקוד.
אחרי העדכון עדיין קיבלתי שגיאה ("Error loading image"), ואז הבנתי שזה כנראה נובע משימוש בתמונות חיצוניות, וביקשתי ממנו לייצר את הדמויות של המשחק בעצמו:
Create the images using graphics, not by loading them from an external file.
זה פתר את הבעיה, והמשחק התעורר לחיים!
גם כאן יש עוד כמה באגים, למשל: הציפור זזה כשלוחצים על מקשי החיצים במקום להסתובב... אז גם במקרה הזה אתם מוזמנים להמשיך מהמקום שבו הפסקתי.
סיכום
החודש יצאו שלושה כלים חדשים - Claude Artifacts ,Websim ו-Poe Previews, שאיתם כל אחד יכול לבנות משחקים, סימולציות אינטראקטיביות ואפליקציות web. בעמוד הבית של Websim, וגם באתרים שאוספים קישורים ל-Claude Artifacts כמו artifacts.directory ו-GPTsdex AI Artifacts תוכלו למצוא המון אפליקציות כאלה, ולקבל השראה לפרויקט משלכם.
אז מה הדבר הבא שתבנו?
Comments