A Beginner’s Introduction to AI Programming

Programming is prone to errors and bugs because modifications can become inconsistent with the overall structure. The more finely something is split up, the more steps there are, and the more likely errors become. Many programmers find that fixing one thing breaks another. They are always robbing Peter to pay Paul. Many mainstream APKs on the market are constantly upgraded because, even with expert maintenance, these problems are difficult to avoid. This situation is even more obvious with AI programming. To do programming well, it is like giving birth: you cannot give birth to just one hand or one leg first and then assemble everything. The whole thing must be produced together. The more comprehensive the beginning is, the fewer problems there will be later.
Therefore, AI sites or services with limited computing power cannot process an overly long prompt well at the same time. A prompt of more than a thousand Chinese characters can easily cause them to freeze.
Although everything is difficult at the beginning, difficult tasks in the world must begin with what is easy, and great tasks must begin with the details. The prompt must still be divided reasonably according to the available computing power in order to adapt to this imperfect environment. AI programming prompt sample
Each sentence is an instruction, separated by commas and periods.
The basic first step is as follows:
Please design and generate an AI image-generation web project named “Fox AI”. The goal of the project is to create a simple, mobile-friendly, easy-to-use, and quickly deployable AI image-generation tool supporting deployment on Cloudflare, Vercel, and similar platforms, Docker deployment, and Wasmer deployment. Provide clear deployment guides, build commands, key variables, and important notes on GitHub. Required technology stack:
Deployment: Support Cloudflare Pages, Cloudflare Workers deployment, Vercel, and Docker

  • Backend: Preferably use Cloudflare Workers or Pages. Traditional databases and D1 may be used. Login, settings, history, and other features may also be implemented through browser local storage, environment variables, configuration files, or encrypted tokens.
    The project structure must be clear and the code modular to facilitate future feature expansion.
    Requirements:
  1. Text-to-image
  • Support positive prompts
  • Support negative prompts
  • Support image-size adjustment
  • Support sampler selection
  • Support high-quality image generation
  • The text-to-image feature must be usable, stable, and error-free
  1. Image-to-image
  • Support reference-image uploads
  • Support secondary generation based on images
  • The image-to-image feature must be usable, stable, and error-free
  1. AI image-generation interfaces
  • Support integration with the Cloudflare AI API
  • Support configuring a Cloudflare API Token and Account ID
  • Support extending integration to other free computing platforms or public model interfaces
  • If an external platform is unavailable, display a clear error message; there must be no feature failure, freezing, or silent failure
  1. Model management
  • Display a model list
  • Support searching for models on the internet
  • Support favoriting or saving models
  • Display 30 models by default
  • Support one-click translation of model names into Chinese
  • If model translation fails, retain the original English name
  1. History
  • Save records of generated images
  • Support viewing history
  • Support deleting history
  • Support downloading images from history
  • History must not depend on a database and may be implemented using browser local storage or file storage
  1. User system
  • Support username-and-password login
  • A database is not required
  • Login status may be managed through local storage, encrypted tokens, environment variables, or configuration files
  • The production environment must support configuring an administrator account
  • Plaintext passwords must not be hard-coded
  1. Settings
  • Support a basic settings page
  • Support restoring factory settings
  • Support switching night mode
  • Support adjusting image-generation parameters
  • Settings should be simple, intuitive, and suitable for mobile operation
    Interface requirements:
  1. Mobile-first
  2. Simple interface
  3. Short operation paths
  4. Buttons and input fields suitable for tapping on phones
  5. Support night mode
  6. The panel title should be displayed as “Fox AI”
  7. Clear access to the main features, including:
  • Text-to-image
  • Image-to-image
  • Model selection
  • History
  • Settings
  • Night-mode toggle
    Prohibited:
  1. The text-to-image feature must not be unavailable
  2. The image-to-image feature must not be unavailable
  3. Upload failures without notifications must not occur
  4. Model-loading failures without notifications must not occur
  5. History must not be impossible to delete or download
  6. The login feature must not be unusable
  7. Plaintext passwords must not be hard-coded in the production environment.
    Please output a complete project plan, including: technology-stack description, environment-variable description, deployment guide, deployment notes, and troubleshooting methods for common errors.
    Second-step prompt optimization:
    The project should be able to generate clear, accurate images using free computing resources. Add search and saving for popular, open-source, key-free models available across the internet, allowing searches for various popular free models. Sensitive content should be generated and displayed normally, with a toggle. Improve Chinese-English prompt translation. Effectively prevent inaccurate image generation and quality problems. The model library should contain at least ten poster models, with one-click search and add functions. Categorize models and mark free ones. Implement the input search function. Place the style area below the real-time drawing-workbench preview. Add a negative-prompt field below the prompt-options area, with one-click generation of optimization suggestions. Cloudflare Workers AI image-generation computing power should only require binding in the CF dashboard and redeploying. Implement factory presets for free computing power and the use of external computing power.

Implement Chinese-English prompt translation with status indicators. Implement one-click drawing from historical images. Focus on preventing invalid API calls, failure to generate images, inaccurate image generation, and quality problems. Include built-in APIs for AI chat and translation, with support for external APIs.

Third modification log
The login interface should support administrator-password login, user registration, and email registration.
Support various deployments, including Zeabur / Render / Railway and Netlify, and add deployment guides. Support Cloudflare D1 databases and other database bindings, with detailed guides. Add a CF pull-and-deploy guide to the repository README.
On the history page, divide the content into two sections: one for historical images, and another that can bind R2 Object Storage to store historical images. Images in R2 storage should be downloadable, their sizes should be displayed, an R2 file-management interface should be implemented, and total remaining storage should be shown.
Add an R2 binding guide and explain that individual images larger than 2 MB must use R2 for synchronization. Implement custom image-generation dimensions.
Order the settings sections from top to bottom as follows:
One-click night-mode toggle.
One-click seamless switching between desktop and mobile versions.
Integrated computing-engine selection.
Other external computing-resource KEY configuration.
External AI chat and translation API Key configuration.
Password-change section; administrators can view the devices in use. Cloudflare API status indicator.
D1 database binding status indicator.
R2 binding status indicator.
One-click logout button.
Instructions for one-click D1 and R2 binding in the Cloudflare dashboard.
(Sections should be collapsible and collapsed by default, but sections that are open should remain open after refreshing.)
Implement batch management of history. After connecting a database, history and settings should be synchronized.
Optimize the text-to-image selection area; its functional interface should basically match image-to-image.
Review and optimize everything to ensure that image-generation errors do not occur.
Add bottom navigation buttons for switching between main sections.
Implement theme-color adjustment in the settings area.
On the login interface, the administrator-password section should allow login only with the variable password configured during deployment. Registration and login should work without a database; with a database, registration information can be saved.
The login interface should have a white background with an artistic white-fox pattern. Add more computing-resource integrations and drawing features,
and mark free options.
Each computing application must operate independently.
Models must be searchable on the internet and savable.
Computing resources, models, and styles must be perfectly integrated into the drawing process so that high-quality images can be generated.
Finally, check and fix errors so that drawing works smoothly and normally regardless of whether a database is available.
Implement administrator login using only the administrator password, without requiring an administrator username. Focus on checking and resolving image-generation failures and poor image quality.
Historical images must support viewing and downloading.
Modify the interface to be more suitable for phones and computers. Set blue as the default theme color, and properly fix and implement theme switching. Make the bottom buttons more attractive. Fix one-click switching between phone and computer interfaces. Properly fix language switching. Properly fix computing applications. Properly fix image parsing. Perform a comprehensive check and fix to prevent conflicts and unknown errors.
Fourth modification log
Add another Cloudflare API status indicator to show whether the CF token connection was successful.
Allow users to enter the CF ID and token on the webpage and use them effectively for image generation.
Change the default CF computing resource to manual selection, preserving the selected option in memory instead of switching back to CF computing power. Refreshing the webpage must not affect the selection, and all computing resources must work normally.
Add more free computing-resource interfaces; OpenAI is mandatory. Ensure that each type of computing resource works normally. Add compatibility with all interfaces that provide computing power.
Fix one-click Chinese-English prompt translation.
Fix the image-vocabulary analysis feature.
Change the bottom-button icons to a normal size, fix icon errors, and replace them with more attractive icons.
Display image information in history, and allow image parameters to be loaded into the drawing interface with one click.
Add advanced settings for generated images.
For searched models, display thumbnails and detailed information, allow one-click viewing of source-site information, and enable synchronization when adding models to the model library.
Non-administrators must not be able to modify tokens or IDs saved by the administrator.
Administrators should be able to view registered users at the bottom of the settings area. Email-registered user information can be synchronized after connecting to D1.
Add a reserved feature at the bottom of Settings, visible only to administrators, for replying with verification codes to email-registered users. The reply email can be configured. If it is not configured, users can register without verification codes; once configured and enabled, email verification will be required for registration.
After connecting a database, synchronize history, prompt drafts, settings, and other external computing-resource KEY configurations.

4 Likes

What does it mean?

Packed with valuable, practical information

Some knowledge about using AI for programming

Could you tweak the layout and optimize it a bit? It’s quite cramped, which might not make a good first impression when people visit.

2 Likes

What a mess!
One-sentence summary: Ask for detailed writing, have the AI check the documentation, and don’t let it make things up.

3 Likes

The formatting is a little dizzying.

Got it, I did it on my phone.

Thanks for the guidance. I wrote it on my phone. Someone said there were formatting issues, but I haven’t checked how it looks on a computer.

Let AI help you format your Markdown

1 Like

ok

This is written so well—the requirements are detailed, and the AI stays on track.

I learned something new.

1 Like

Thanks for sharing your technical expertise.

:ac01:

Thanks for sharing.