Я построил ИИ, который превращает текст меню в аппетитные фото питания
1 августа 2025 г.Недавно я поставил перед собой задачу построить работающий прототип службы визуализации продуктов питания за один уик -энд. Идея была простой: сделайте скриншот меню, извлеките названия блюд и генерируйте реалистичные изображения питания с помощью современных инструментов искусственного интеллекта.
В этом посте я пройду, как я объединил OCR (Tesseract), API OpenAI и модели генерации изображений, чтобы создать полностью работающую демонстрацию - включая репо GitHub и живую версию, которую вы можете попробовать.
🥘 Идея
Вход: `Жареный лосось с манго сальсой и рисом жасмина
Выход:Реалистичное изображение этого блюда, подходящее для меню или приложения доставки.
Примеры использования:
- Рестораны или кухни -призраки без дизайнеров
- Пользователи, навигающие на зарубежные меню
- Быстрое прототипирование для стартапов пищевых технологий
🔧 Stack
Внешний интерфейс:
- Lovable.dev - целевая страница
- React (TypeScript): современная структура пользовательского интерфейса
- Vite: Fast Development Server и инструмент сборки
- Tesseract.js: ocr на стороне клиента для извлечения текста
- Axios: HTTP -клиент для запросов API
- Tailwind CSS: утилита-первая структура CSS
Бэкэнд:
- Колза Python: простой сервер API -сервера бэкэнда
- OpenAI API: GPT-3.5-Turbo для анализа меню
- Replicate API: стабильная диффузия (512x512) для генерации изображений
- Flask-Cors: поддержка совместного использования ресурсов по перекрестному происхождению
Целевая страница с ovloble.dev
Я использовалLovable.devгенерировать маркетинговую копию и вставить ее вКарташаблон. Весь процесс занял менее 15 минут.
Образец CTA:
«Визуализируйте свои блюда, прежде чем они попадут на стол. Воплотите в жизнь свои меню с ИИ».
Результат:
Вы можете легко подключить проект с GitHub для управления вашим кодом, отслеживания изменений и сотрудничества.
🧠 Основная логика: от изображения до меню визуализации в трех шагах
Сервис следует за простым, но мощным трубопроводом:
- Извлечь текст из изображенияс использованиемTesseract.js
- Разобрать этот текст в структурированные данныес использованиемAPI Openai
- Генерировать фотореалистическое изображениесРепликация (например, стабильная диффузия)
1. 📸 Текстовое извлечение с помощью tesseract.js
Пользователь загружает изображение (как фото меню). Tesseract читает и извлекает сырой текст:
const { createWorker } = require("tesseract.js");
const extractText = async (imagePath) => {
const worker = await createWorker("eng");
const {
data: { text },
} = await worker.recognize(imagePath);
await worker.terminate();
return text;
};
2. 🧠 Структура текста с OpenAI
Далее, необработанный выход OCR очищается и структурирован с использованием GPT. Например, поворот:
BAR SNACKS\nLobster thermidor crumpet, pink grapefruit salad 7.7\nButtermilk
fried chicken, Korean BBQ sauce (to share) (v) 5.3\nTeriyaki chicken skewers
в:
"dishes": [
{
"description": "Delicious lobster on a crumpet with a refreshing pink grapefruit salad",
"name": "Lobster Thermidor Crumpet"
},
{
"description": "Crispy fried chicken served with flavorful Korean BBQ sauce, perfect for sharing",
"name": "Buttermilk Fried Chicken"
}
]
Вы отправляете подсказку, как это:
const response = await openai.chat.completions.create({
model: "gpt-4",
messages: [
{
role: "user",
content: `You are a helpful assistant that extracts dish names and short,
appetizing descriptions from restaurant menus. If the provided
text is not a food menu, reply with ONLY the word 'ERROR'.
Reply ONLY with the JSON array or 'ERROR'.
Example: [{"name":"Tiramisu","description":"Classic
Italian dessert with coffee-soaked ladyfingers and
mascarpone cream"}, ...]`,
},
],
});
const structuredMenu = JSON.parse(response.choices[0].message.content);
3. 🖼 Создание изображений с репликацией
Наконец, каждое описание структурированного блюда передается, чтобы воспроизвести, чтобы создать визуальное:
const replicate = new Replicate({ auth: process.env.REPLICATE_API_TOKEN });
const output = await replicate.run(
"stability-ai/sdxl:latest",
{
input: {
prompt: `A photorealistic, realistic, beautifully plated, tasty-looking
dish: {dish name}. {dish description} Professional food
photography, restaurant menu style, high detail, vibrant colors,
no text, no watermark, no people, only the dish on a clean
background, 4k, studio lighting, shallow depth of field.`,
},
}
);
const imageUrl = output[0];
🔐 Безопасная среда и настройка Dockerized
Чтобы оптимизировать разработку и обеспечить безопасное развертывание, я контейнеровал все приложение, используя Docker, позволяя последовательно работать в разных средах в разных средах. Я также внедрил управление переменными среды через.envФайл, который исключен из управления версией, для защиты конфиденциальной информации, такой как токены API. Этот подход хранит конфигурацию отделенной от кода, повышает безопасность и позволяет плавно масштабировать облачные платформы или производственные среды.
Развертывание
Вот четкое и практическое объяснение того, как развернуть вашеФронтанд и Бэкэнд, в том числе черезМилыйи другие платформы:
Развертывание фронта (милая и за пределами)
Для фронта (например, React, Vite или Static HTML/JS) вы можете развернуть, используя:
Lovable.dev:
- Отлично подходит для быстрого, без код, удобного для хостинга.
- Установить переменные среды через панель инструментов (например,,
VITE_API_URL) - Push -код через GitHub; Милые автоматические строительства и размещают ваш фронт.
Альтернативные фронтальные платформы:
- Вертел(Идеально подходит для React/next.js)
- NetLify(Отлично подходит для статических сайтов или приложений Vite)
- CloudFlare Pages(Бесплатно и быстро для статического контента)
💡 Если ваш фронт общается с внешним API (например, ваш бэкэнд или репликация), убедитесь, что базовый URL -адрес установлен с помощью переменной ENVVITE_API_URLПолемРазвертывание бэкэнд (при использовании слоя узла/экспресса или API)
Если ваш бэкэнд больше, чем статический хостинг (например, вы используете express.js, обрабатывают маршрутизацию или обработки), вы можете развернуть его отдельно, используя:
- Оказывать(Простой узел/Docker Backend Hosting, бесплатный уровень доступен)
- Железная дорога(Поддерживает node.js и docker, Easy Env Variable Management)
- Fly.io(Для запуска докеризованных приложений по всему миру, с низкой задержкой)
- Функции Supabase / Firebase(Если вы хотите без сервера логики бэкэнд)
💡 Ваш бэкэнд на основе Docker может быть развернут непосредственно в эти услуги. Просто убедитесь, что вашDockerfileразоблачает правильный порт и надежно использует переменные среды (через.env, не жестко кодировать).
🔄 Типичный поток архитектуры
[Frontend on Lovable / Vercel] ───> [Backend on Render / Railway / Replicate API]
↑
Uses env: VITE_API_URL=https://api.example.com
Этот проект помог мне исследовать быстрое прототипирование с современными инструментами ИИ и поделиться своими выводами с сообществом разработчиков. Открытым исходным кодом и написав о процессе, я надеюсь, что другие смогут опираться и адаптировать аналогичные рабочие процессы для своих вариантов использования.
- GitHub:github.com/timur164/ai-powered_food_visualization
- Живая демонстрация:Gastro-Vista-Ai.Lovable.App
Оригинал