손으로 직접 AI 앱 빌드: 요구 사항 분석부터 배포 및 출시까지 전체 프로세스에 대한 가이드

머리말

이 글에서는 큰 단계 3개 + 작은 단계 9개만 필요한 최단 경로 및 최경량 모드로 애플리케이션을 구현해보고, 다음은 실습 과정입니다.

요구 사항 설명

제품 관리자의 관점에서 체계적으로 설명한 내용은 다음 템플릿에서 확인할 수 있습니다:

1. 요구 사항 개요어떤 문제를 해결하고 있는지, 어떤 기능을 달성하고 있는지, 전반적인 소개가 필요합니다.
2. 대화형 인터페이스 설명입력 상자 및 출력 상자 기능 및 상호 작용.
3. 기능적 도구 제공기능적으로 실현 가능한 AI 모델을 검색합니다.

관련 모델

기사 일러스트를 생성하는 데 사용할 수 있는 AI 모델은 다음과 같으며, 구체적인 API 사용법을 확인할 수 있습니다:
모델 주소

완성된 데모 예시::보려면 클릭

요구 사항 실현 단계

1. 요구 사항에 대한 전반적인 설명

Gradio를 기반으로 애플리케이션을 개발하여 다음 기능을 구현하세요:

• 사용자가 공개 글의 콘텐츠를 입력한 후 원클릭 생성 버튼을 클릭합니다.
• 제목, 초록 자동 생성.
• 초록을 기반으로 영문 프롬프트를 자동으로 생성하고 기사 그래픽을 생성합니다.

2. 프런트엔드 핵심 모듈

1. 사용자 입력 상자: 사용자에게 공개 글의 콘텐츠를 입력하도록 알려줍니다.
2. 헤더 출력 상자::
   • 공개 번호에 적합한 5개의 제목(64자 이하)을 자동으로 생성합니다.
   • 좌우 레이아웃, 스트리밍 출력, 사고 과정과 최종 결과물의 분리된 프레젠테이션.
3. 요약 출력 상자::
   • 공개 번호에 적합한 요약(120단어 이하)을 자동으로 생성합니다.
   • 좌우 레이아웃, 스트리밍 출력, 사고 과정과 최종 결과물의 분리된 프레젠테이션.
4. 이미지가 있는 기사 프롬프트 출력 상자::
   • 요약에 따라 영어로 된 프롬프트가 자동으로 생성됩니다.
   • 스트리밍 출력이 있는 왼쪽 및 오른쪽 레이아웃.
   • 편집 가능하며 재생성을 지원합니다.
5. 기사 그래픽용 출력 상자::
   • 생성된 영어 프롬프트에 따라 이미지를 생성합니다.
   • 1024x500 크기의 이미지 2개를 생성합니다.

시각적 스타일: 테크니컬한 청록색 + 보라색.

3. 서버 측 API

제목, 요약, 프롬프트 출력 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 替换为你的魔搭token',
'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')

클라우드 노트북에서 AI로 코드 생성 및 테스트 다듬기

1. 코드 생성

• Cursor, DeepSeek-R1, QwenMax-QWQ, Claude 3.7 등과 같은 대형 모델을 사용하여 코드를 자동으로 생성할 수 있습니다.
• 코드는 다음과 같이 저장됩니다. .py 문서화.

2. 노트북에서 코드를 실행합니다.

• 노트북은 개봉 후 바로 사용할 수 있는 환경이 사전 설치되어 있습니다.
• 노트북 주소
• 움직여야 합니다. .py 문서화:

!python /mnt/workspace/文件名.py

3. 테스트 및 최적화

프런트엔드 수락

네 가지 도구에서 생성되는 프런트엔드 인터페이스는 서로 다르지만 모두 요구 사항을 충족합니다.

커서	DeepSeek-R1
QwenMax-QWQ	Claude3.7

서버 측 수락

기능이 제대로 작동하고 생성된 제목, 초록, 프롬프트 및 이미지가 예상대로 표시됩니다.

배포 시작

CreateSpace의 기본 설정

• 새로운 창작 공간
• 기본적으로 구성되어 있는 플랫폼의 여유 CPU 리소스를 사용합니다.

2. 핵심 단계: API 키 보호

• 코드를 수정하여 API 키를 환경 변수에 저장합니다.

사전 수정:

수정되었습니다:

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

3. 문서 업로드 및 온라인 게시

• 노트북에서 디버깅 성공 .py 파일 이름을 다음과 같이 변경합니다. app.py 를 클릭하고 업로드합니다.

이 작업을 완료하면 공유할 수 있는 링크가 제공됩니다:

요약

누구나 앱 개발자가 될 수 있습니다. AI로 마법을 켜고 수천 개의 앱을 만들어 보세요!

애플리케이션은 무한대로 확장할 수 있습니다:

1. 글 꾸미기 및 마이크로블로그 사본을 추가합니다.
2. 일러스트레이션 스타일은 선택 사항입니다.

더 많은 가능성이 여러분을 기다리고 있습니다! 🚀