Метапромптінг з ChatGPT: пишемо Sudoku за годину

Всі знають, що ChatGPT вміє писати будь-якою мовою включаючи мови програмування. Але чи замінить він коли-небудь програмістів? Почнемо з малої форми. Я спробую написати щось за допомогою ШІ протягом однієї години.

Мені захотілось написати імплементацію головоломки sudoku, щось типу того, що можна робити на Sudoku by CB. А саме — фронтендну імплементацію судоку, де можна отримати нову головоломку, заповнювати її за допомогою спливаючого віконечка, мати валідацію та підказки.

Я хотів би отримати готовий код, який взагалі не потрібно ніяк доробляти. Для цього я використовую метапромптінг: я не тільки не хочу писати сам код, я ще й не хочу писати сам необхідний для цього детальний промпт. Замість цього, я пишу промпт, який напише промпт, який напише код.

I want to write a sudoku-solving SPA app. It should have following structure: index.html with all the interface, styles.css for styling, generate_sudoku.js for generation of sudoku puzzles, app.js for solving sudoku puzzles and other functionality. It goes like this: user is presented with sudoku. Every table cell in sudoku that doesn’t have number initially, is clickable. On click, a popup appears with standards numpad to enter a number. Only available numbers are active (numbers in same line, column and square are excluded). If sudoku becomes invalid, number is red. Ask me additional questions and write a prompt for LLM that would produce needed code

У відповідь chatGPT спитав мене наступне:

Here are a few clarifying questions that will help ensure the app meets your expectations:

  1. Difficulty Levels: Would you like different difficulty levels for Sudoku generation (easy, medium, hard)?
  2. Validation: Should the app validate the Sudoku puzzle automatically as users input numbers, or should it be triggered by a button (e.g., “Check Solution”)?
  3. Popup Design: How would you like the popup for entering numbers to look—should it be a simple overlay with number buttons, or would you prefer a custom design (e.g., mobile-friendly numpad layout)?
  4. Undo/Reset: Would you like an undo or reset button to allow users to revert changes?
  5. Hints: Should there be a “Hint” feature that suggests a correct number for a selected cell?

Once you confirm or provide additional input, I’ll draft the prompt for generating the code.

Відповідаю коротко:

1. Yes, make “start new game” button that would call a popup with three difficulty options for initiating new sudoku.
2. Automatically, plus numbers should be inactive for specific cell’s numpad
3. Simple overlay
4. no need
5. no

І ось промпт для кода першої версії

Generate the code for a Sudoku-solving single-page app (SPA) with the following structure:

  1. index.html — A minimalistic interface that displays the Sudoku grid, a ’Start New Game’ button that triggers a popup for selecting difficulty (easy, medium, hard), and popups for selecting numbers for Sudoku cells.
  2. styles.css — Styling for the Sudoku grid (9×9 table), highlighting the currently active cell, marking invalid numbers in red, and styling popups (e.g., difficulty selection and numpad overlay).
  3. generate_sudoku.js — Logic for generating valid Sudoku puzzles for easy, medium, and hard difficulties. This script should fill the grid with a puzzle, leaving some cells empty for the user to solve.
  4. app.js — Core Sudoku solving functionality. This script should:
    • Allow the user to click on empty cells and open a simple overlay with a numpad (1-9).
    • Disable numpad options that conflict with the row, column, or 3×3 square.
    • Automatically validate the puzzle as the user enters numbers, turning invalid entries red.

Additional Details:

  • The Sudoku table should have clickable cells. When a user clicks on an empty cell, an overlay popup should appear with numbers (1-9) as buttons.
  • Only numbers that are not in the same row, column, or 3×3 box should be active. Invalid options should be disabled.
  • The app should automatically validate numbers as they are entered. If a number makes the Sudoku invalid, it should be highlighted in red.
  • Include a ’Start New Game’ button that triggers a difficulty selection popup (Easy, Medium, Hard).
  • CSS should handle grid layout and simple popup/overlay styling.

Please ensure the code is well-commented and ready to be integrated.

Я несу його в окрему табу, запускаю новий чат, виконую, отримаю код всіх файлів, зберігаю їх, що вийшло можно подивитись тут. В принципі, виглядає майже нормально, генерує судоки, правда, суровим рендомом, як можна побачити в коді

function generateSudoku(difficulty) {

const grid = [

[5, 3, 0, 0, 7, 0, 0, 0, 0],

[6, 0, 0, 1, 9, 5, 0, 0, 0],

[0, 9, 8, 0, 0, 0, 0, 6, 0],

[8, 0, 0, 0, 6, 0, 0, 0, 3],

[4, 0, 0, 8, 0, 3, 0, 0, 1],

[7, 0, 0, 0, 2, 0, 0, 0, 6],

[0, 6, 0, 0, 0, 0, 2, 8, 0],

[0, 0, 0, 4, 1, 9, 0, 0, 5],

[0, 0, 0, 0, 8, 0, 0, 7, 9]

];

// Adjust the number of clues based on difficulty

let emptyCells;

if (difficulty === ’easy’) emptyCells = 40;

if (difficulty === ’medium’) emptyCells = 50;

if (difficulty === ’hard’) emptyCells = 60;

// Randomly remove numbers from the grid based on difficulty

for (let i = 0; i < emptyCells; i++) {

let row = Math.floor(Math.random() * 9);

let col = Math.floor(Math.random() * 9);

grid[row][col] = 0;

}

return grid;

}

Що ж, переходжу в перший тред к своєму метапромпту, і інструктую chatGPT по змінах:

rewrite, considering following:

— valid sudoku must be generated, algorithm based on random numbers won’t do

— levels are too hard, there should be other numbers in complexity (50% unknown numbers for easy, 70% for hard)

— sudoku design should include inner 3×3 squares outline


В новому промпті з’являються відповідні зміни:


Generate the code for a Sudoku-solving single-page app (SPA) with the following structure:

  1. index.html — A minimalistic interface displaying:
    • A 9×9 Sudoku grid.
    • A ’Start New Game’ button that triggers a popup with three difficulty levels: Easy (50% unknown cells), Medium (60% unknown cells), Hard (70% unknown cells).
    • Popup overlays for selecting numbers for each empty cell, and basic layout including the grid’s 3×3 inner square outlines.
  2. styles.css — Styling for:
    • The Sudoku grid, ensuring that 3×3 sub-grids are clearly outlined.
    • Highlighting the currently selected cell.
    • Invalid numbers should be styled in red when the puzzle becomes invalid.
    • Popup/overlay designs for selecting difficulty and for entering numbers (a simple numpad-style interface).
  3. generate_sudoku.js — This script must use a backtracking algorithm to generate valid, complete Sudoku boards, and then strategically remove numbers according to the difficulty level:
    • For Easy, 50% of the numbers should be removed from the grid.
    • For Medium, 60% of the numbers should be removed.
    • For Hard, 70% of the numbers should be removed.
    • Ensure that the resulting puzzles have a unique solution by validating the removals.
  4. app.js — Handles the Sudoku gameplay and solving functionality:
    • Allow users to click on empty cells, which triggers a simple popup with number buttons (1-9).
    • Disable any numbers in the numpad that conflict with existing numbers in the same row, column, or 3×3 square.
    • Automatically validate the puzzle as numbers are entered. If an entry makes the Sudoku invalid, the number should be highlighted in red.
    • Ensure valid inputs remain visible and update the puzzle dynamically.

Additional Details:

  • The Sudoku grid should clearly show the 3×3 sub-grid outlines, to help players easily recognize the layout.
  • The ’Start New Game’ button should trigger a popup allowing users to choose the difficulty (Easy, Medium, Hard). The selected difficulty will control how many cells are left blank for the player to fill.
  • Ensure the backtracking algorithm used for Sudoku generation produces valid puzzles with a unique solution.
  • The user should be able to interact with empty cells by clicking, which brings up a simple overlay popup displaying numbers 1-9. Only valid numbers should be clickable in the popup.
  • Automatically validate the puzzle as users fill in numbers, highlighting incorrect numbers in red.

Please ensure that the code is modular and well-commented for ease of integration and further customization

Результат другої ітерації можна побачити тут.

Ось що попросив наступним кроком:

rewrite prompt considering following:

— instead of disabling numbers on a numpad, let’s allow entering any number. If sudoku becomes invalid

— mark this number red.

— make cells bigger

— if three or less numbers are still possible for an empy cell, show theese numbers in the cell with grey font

Це принесло третю версію де замість дізейбла цифр в нампаді вводу я вирішив підказувати в клітинках де залишилось три чи меньше варіанта.

Далі я додав, поступово:


rewrite considering:

— special mode where possible numbers are shown in empty cells should be connected to a button “hint” button

— if entered number makes sudoku invalid, write this number in red.

rewrite considering:
— add button to turn hinting on and off

rewrite considering:

— cells that were empty at the beginning of the game must be editable with the same popup with numpad

— ensure that initially available numbers and user-entered numbers are looking different

— click on a cell that was initially empty should always bring numpad popup

rewrite considering following:

— there are three states for each cell: initially filled with number while creating sudoku, filled by user and valid (didn’t invalidate sudoku when entered), and filled by used and invalid. First should have slightly grey background, second white bg and black color, third

— white bg and red color.

— there should be a numpad available for any cell that was not initially filled — sudoku should be square, take as much space as possible, and be centred on the screen


За годину вдалось прокрутити сім ітерацій і отримати таку версію. В ній все виглядає класно по лейауту, можна вводити і редагувати цифри, видаляти, валідація робить червоним, все, що я від нього хотів. Що ж за промт вийшов в фіналі? Ось він:

Generate the code for a Sudoku-solving single-page app (SPA) with the following structure and functionality:

  1. index.html — A minimalistic interface displaying:
    • A 9×9 Sudoku grid that dynamically resizes, taking up 90% of the available viewport while remaining square and centered on the screen.
    • A ’Start New Game’ button that triggers a popup with three difficulty levels: Easy (50% unknown cells), Medium (60% unknown cells), Hard (70% unknown cells).
    • A ’Hint’ button to toggle hint mode on and off, showing possible numbers in grey font inside empty cells where three or fewer valid numbers remain.
    • A numpad overlay popup available for any cell that was not initially filled with a number.
  2. styles.css — Styling for:
    • A dynamically sized Sudoku grid where the cell size is calculated initially so that the entire grid takes up 90% of the available viewport width or height (whichever is smaller), and it remains centered on the screen.
    • Three distinct visual states for the cells:
      1. Initially filled cells (numbers filled when the Sudoku is generated):
        • Slightly grey background with bold, dark text to differentiate from user input.
      2. User-filled cells (valid):
        • White background with black text.
      3. User-filled cells (invalid):
        • White background with red text when a number creates an invalid state (automatically validated).
    • Clear outlines for the 3×3 sub-grid sections.
    • Styling for the numpad, popups, and the ’Hint’ mode.
  3. generate_sudoku.js — A script that:
    • Uses a backtracking algorithm to generate valid, complete Sudoku boards.
    • Removes a specific percentage of numbers based on the difficulty level:
      • Easy: 50% of the numbers removed.
      • Medium: 60% of the numbers removed.
      • Hard: 70% of the numbers removed.
    • Ensures that the puzzle remains solvable and has a unique solution even after removing numbers.
  4. app.js — Handles the Sudoku gameplay and solving functionality:
    • For any cell that was not initially filled, clicking it should always trigger a numpad popup to allow users to select a number (1-9).
    • Three distinct states for each cell:
      1. Initially filled cells are non-editable and have a slightly grey background with bold, dark numbers.
      2. User-filled cells (valid) will have a white background with black text.
      3. User-filled cells (invalid), where the number creates an invalid state (conflicts in row, column, or 3×3 sub-grid), will have a white background with red text.
    • Automatically validate the grid as numbers are entered. If a number creates an invalid state, it should immediately turn red.
    • A ’Hint’ button that toggles on/off:
      • When ’Hint’ mode is on, display possible numbers in grey font inside empty cells where three or fewer valid numbers remain.
      • When ’Hint’ mode is off, hide these hints.
    • Dynamically update the grid based on user input, ensuring that valid numbers are retained and the visual state of each cell is updated.

Additional Details:

  • The Sudoku grid should be designed to take up 90% of the viewport (width or height, whichever is smaller) and be square. The cell size should be calculated initially to ensure that the grid fits into this space and stays centered.
  • The ’Start New Game’ button should trigger a difficulty selection popup (Easy, Medium, Hard), controlling how many cells are left blank.
  • For any cell that was not filled initially, the user can click on it to bring up a numpad for number entry. If the user enters a number that makes the Sudoku invalid, the number should turn red.
  • Differentiate between initial, pre-filled cells (grey background, bold numbers) and user-filled cells (white background for both valid and invalid entries, with red text for invalid numbers).
  • Ensure the Sudoku is generated using a backtracking algorithm to ensure a unique, valid solution, with a difficulty-specific number of cells left blank.

Please ensure the code is modular, well-commented, and easily customizable.

Спробуйте його на вашому LLM of choice. Працює? Звичайно, це дуже маленький проект, але і часу я витратив ровно одну годину. І схоже, що в таких масштабах ШІ може виявитися дуже конкурентним.


Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

👍ПодобаєтьсяСподобалось4
До обраногоВ обраному2
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
За годину вдалось прокрутити сім ітерацій і отримати таку версію. В ній все виглядає класно

Спробував, пограв
Спробував почати нову гру по серединi поточноi
Вкладка браузера зависла

Враховуючи вiдсутнiсть будьяких вимог по дизайну та результат що не дуже працюе — сентецiя

ШІ може виявитися дуже конкурентним.

не витримуе перевiрки реальнiстью

а ти ж нахвалював Claude, що краще код пише :)
і не зрозуміло хто це, 3.5, 4, 4о?

o1-preview
ну до неї Claude був кращий )
насправді з Клодом теж працює норм

в мене до o1 трепетне відношення як до чарівників з «3 бажаннями», треба не розтринькати ті 20 на тиждень :)
ніяких експериментів, тільки Все Саме Важливе філософське, стратегічне чи робоче :)))

Можливо вам стане у пригоді довідник «Всі ті важливі питання, на які зазвичай відповідають, коли намагаються вирішити якусь проблему»
Якщо у вас такого нема, то складіть його собі. У тій сотні питань буде для вас велика допомога.
У голові їх не втримати, тому — довідник потрібен.
І що цікаво — можна створити його електроним. І це буде більш простіший пристрій чим чатик.
Така собі експертна система декомпозиції проблеми. Безкоштовна.

так ChatGPT ж зразу з best practices відповідає про концепції, і з прикладами тулзів і типових рішень конкретних
сама питаннями декомпозиції — я це не заміню, це тільки самий перший план буде

Звичайно, це дуже маленький проект, але і часу я витратив ровно одну годину.

А чому б не провести трансляцію на youtube? Щоб люди переконалися, що рівно одну годину.

та воно якби можна, якщо б хтось це потом дививсь )

На Hard режимі з включеними хінтами інколи вішається.

Працює? Звичайно, це дуже маленький проект, але і часу я витратив ровно одну годину. І схоже, що в таких масштабах ШІ може виявитися дуже конкурентним.

Ще раз, проблема не у тому, щоб написати код. А в тому, щоб фіксити баги. Тому якщо тобі повезе, ти можеш рухатися уперед до першого бага. Як тільки він трапиться, виникнуть проблеми.

Hard прям занадто hard вийшов.

З багами теж можна боротися LLMом, так що не до першого. В мене купа багів по лейауту була, наприклад.

Тоді я не дуже вірю про одну годину. Знову ж таки, саме цікаве це як фіксити баги, а код генерувати індуси можуть.

Senior Prompt Developer
1. В тебе промтів в статті на 12 кб.
А код всього цього проєкта це 13 кб

2. На гіті в опенсорці, де навчався жпт, це нещасне судоку реалізовано може з пару тисяч раз. Впевнений що він не скопіював готовий код, а потім лише вносив туди помилки ?

3. Хто заплатить за 7 твоїх ітерацій як тестувальника

1. Ну і шо?

2. Не впевнений, але на шо це впливає?

3. Це моя cost of curiosity

Ти би зайшов на ютуб та трохи пошукав би live coding sudoku. На джава чи жаваскрипті судоку пишуть в середньому за 20-30 хв без gpt
youtu.be/...​b8U-U?si=G2sglbRCzuprmOVA

Я не применшую можливості llvm, особливо коли мова про потенціал.
Але конкретно твоя стаття:
1. Як реалізувати просту задачу яка вже реалізована 100500 разів в опенсорці
2. Як витратити на це в два рази більше часу, ніж це роблять без gpt

Якщо чітко орієнтувати чатик на функцію ознайомлення з 100% достовірною і 100% перевіреною інформацією — а така буває лише у опублікованих, корегованих, редагованих, рецензованих довідниках, то у його використання бачу дуже непогане майбутньє.
У цьому випадку розглядаю чатик як зручний інтерфейс для пошуку і отримання у зручному вигляді потрібної і дуже цінної інформації.
Та якщо чатик, як зараз, бере інфу всіляку з всіляких інтернетів, то тут замало чогось цінного.

Цікаво, чи можна так шахи зробити, щоб можна було грати з другою людиною? Не з компьютером — бо це надто складно. Простіший варіант — з людиною. Який би мав бути промпт...

я спробував, chatGPT збирається юзати лібу chessboardjs.com і таке в мене враження, шо це не буде проблемою...

Класс! Дякую.
У мене є спосіб, як можна грати у шахи та одночасно вивчати їх у парі з іншим гравцем — не компьютером. Бо компьютери так не вміють, як вміють люди, якщо обидва гравці приймуть у грі ось таке обмеження власних дій:
На самому початку такої гри-навчання ми кидаємо жеребок і я маю ходити.
Це означає, що опонент гратиме білими, але...
Я не ходжу сам, своїми фігурами, проте пропоную своєму суперникові декілька варіантів першого хода. Коли він обере один з запропонованих варіантів і зробить свій хід, я отримую від нього декілька варіантів хода, що я маю зробити у відповідь.
Далі, я обираю один з запропонованих ним варіантів, ходжу та пропоную йому декілька варіантів ходів, один з яких він має обрати, щоб походити...
І так далі.
Всі інші правила як у звичайних шахматах.
До речі, якщо хтось просто хоче зіграти у таку гру, розробити чи протестувати такий спосіб гри — велкам.
А ще хочу зробити підсвітку — скільки і яких полів під ударом знаходиться. І під чиїм — білих чи чорних.

Першим ходом я запропоную ходи Na3, Nc3, Nf3, Nh3. Наступним ці самі ходи, тільки той кінь що ходив повернеться назад. Таким чином скоріше за усе буде нічия.

Не зрозумів. Чого ти цим досяг? У варіанті Дракона є Nf3. Але спершу треба запропонувати e4.

Класичний варіант Дракона це 1. e4 c5 2. Nf3 d6 3. d4 cxd4 4. Nxd4 Nf6 5. Nc3 g6. Є також система Мароці 1. e4 c5 2. Nf3 d6 3. d4 cxd4 4. Nxd4 g6 яка дозволяє білим провести c2-c4. Є прискорений дракон 1. e4 c5 2. Nf3 g6 який може перейти у звичайний, а може й не перейти, бо білі мають можливість 3. d4 cxd4 4. Qxd4 Nf6 5. Nc3 Nc6 6. Qa4.

Але, чому мені треба пропонувати противники робити гарні ходи. Я чогось не зрозумів ідею. Щоб виграти, треба пропонувати погані.

Ідея у навчанні. Навчання це виграш обох сторін. І так, при грамотній грі обох сторін виходимо на рівні позиції, але для цього у обох сторін повинні бути однакові підручники.
Проте, якщо тренуємо пам’ять то вже без підручників будемо намагатися створити шедевр, та чи це вийде?
Дійсно можна коня туди сюди, але це ж погана поведінка у шахах.
Тут не йде річ про те щоб перемогти за будь яку ціну.
Це зовсім інша гра, для тих, хто вже бажає не зєвків побільше своєму суперникові, а могутності, щоб випробовувати себе, свої здібності на повну, з якісним супротивом.
Я, так би мовити, цими обмеженнями у правилах гри, запропонував побачити у шахах спільне дослідження, а не міряння фалосами.

Ну... як я зрозумів, там немає перевірки ходів, для цього використовується інша ліба. А у тому прикладі що є, пішак перетворюється лише не ферзя. Проблема використання обох бібліотек... Теоретично може бути. Плюс виникне питання, чи не забудеться про це, і т. п.

Але знову, цікаво знайти не дуже популярну гру, та подивитися.

нє шоб оце статтю як я за тиждень написав клон ібея за 5 днів, на шостий у мене був IPO, а на сьомий я спочивав, а тут всього якесь судоку за годину

Підписатись на коментарі