Building AI apps by hand: a guide to the whole process from requirements analysis to deployment and go-live

preamble

This article tries to realize an application with the shortest path and the lightest mode, only three big steps + 9 small steps, the following is a hands-on teaching process.

Description of Requirements

A systematic description from a product manager's perspective can be found in the following template:

1. Overview of requirements: What problem is being solved, what function is being realized, and overall presentation.
2. Interactive Interface Description: Input box and output box functions and interactions.
3. Provision of functional tools: Finding AI models that are functionally realizable.

relevant model

The following AI models are available for generating article illustrations, and get specific API usage:
model address

Example of a finished demo::Click to view

Requirements realization steps

1. Overall description of needs

Develop an application based on Gradio that implements the following functionality:

• After the user enters the content of the public post, click on the One Click Generate button.
• Automatic generation of titles, abstracts.
• Automatically generate English Prompts based on abstracts and generate article graphics.

2. Front-end core modules

1. User input box: Reminds the user to enter the content of the public post.
2. Header output box::
   • Automatically generate 5 titles (64 characters or less) that are suitable for public numbers.
   • Left-right layout, streaming output, and separate presentation of thought process and final output.
3. Summary Output Box::
   • Automatically generate a summary (120 words or less) suitable for public numbers.
   • Left-right layout, streaming output, and separate presentation of thought process and final output.
4. Article with image Prompt output box::
   • Prompt is automatically generated in English based on the summary.
   • Left and right layout with streaming output.
   • Editable and supports regeneration.
5. Output box for article graphics::
   • Generate an image based on the generated English Prompt.
   • Generates 2 images of size 1024x500.

Visual style: techy cyan + purple.

3. Server-side API

Title, Summary, Prompt Output API

import requests
import json
from PIL import Image
from io import BytesIO
url = 'https://api-inference.modelscope.cn/v1/images/generations'
payload = {
'model': 'djyzcp123/gjerc', # ModelScope Model-Id, required
'prompt': 'A golden cat' # required
}
headers = {
'Authorization': 'Bearer Replace with your Magic Hitch token', 'Authorization': 'Bearer', 'Authorization': 'Bearer', 'Authorization': 'Bearer'
'Content-Type': 'application/json'
}
response = requests.post(url, data=json.dumps(payload, ensure_ascii=False).encode('utf-8'), headers=headers)
response_data = response.json()
image = Image.open(BytesIO(requests.get(response_data['images'][0]['url']).content))
image.save('result_image.jpg')

Generate code with AI and test polish in the cloud Notebook

1. Code generation

• Code can be generated automatically using large models such as Cursor, DeepSeek-R1, QwenMax-QWQ, Claude 3.7, etc.
• The code is saved as .py Documentation.

2. Run the code in Notebook

• Notebook comes pre-installed with the environment right out of the box.
• Notebook Address
• (of a computer) run .py Documentation:

!python /mnt/workspace/filename.py

3. Testing and optimization

Front-end acceptance

The front-end interfaces generated by the four tools are different, but all of them fulfill the requirements.

Cursor	DeepSeek-R1
QwenMax-QWQ	Claude3.7

Server-side acceptance

Functionality works as expected, and the generated Title, Abstract, Prompt, and Images are as expected.

Deployment goes live

1. Basic setup of CreateSpace

• New Creation Space
• Use the platform's free CPU resources, which are configured by default.

2. Key step: API key protection

• Modify the code to store the API Key in an environment variable.

Pre-modification:

Modified:

import os
MODEL_API_KEY = os.getenv('MODEL_API_KEY')

3. Uploading documents and posting them online

• Successful debugging in the Notebook .py Rename the file to app.py and uploaded.

Once you've done that, you'll get a link to share:

summarize

Everyone is an app developer, turn on the magic with AI and build thousands of apps!

The application is infinitely expandable, e.g:

1. Add article embellishments and microblogging copy.
2. Illustration style optional.

More possibilities are waiting for you to explore! 🚀