#cursor #ai #dev #heyboss #bolt #replit #lovable #trae #battle

🎨🤖 Битва AI-помощников: создаем финансовый дашборд 📊

👋 Привет, друзья!

🔬 Сегодня расскажу о новом эксперименте: на прошлом занятии курса по Cursor протестировали 6 разных AI-инструментов для разработки, создавая дашборд для мониторинга личных финансов.

📝 Вводная информация:
Идея проекта: создать веб-дашборд личных финансов для визуального анализа данных из Excel-таблицы.

🎯 Начали с Cursor по методике Plan-Plan-Act:

• 📋 Сформировали контуры ТЗ
• 📑 Разработали полное ТЗ
• 💻 Написали код

🛠 Технические детали первой версии:
• 🐍 Язык: Python
• 🌐 Веб-интерфейс: Streamlit

🔗 Полезные ссылки:
• 📦 Код: https://github.com/dzhechko/pu-finance-dashboard
• 🚀 Приложение: https://pu-finance-dashboard-production.up.railway.app/
• 📊 Тестовые данные: https://disk.yandex.ru/i/LoYazgIq82XYgA

🔄 После успешного эксперимента с Cursor решили пойти дальше и протестировать другие AI-помощники.
Для более современного подхода сменили стек технологий на:
• ⚡️ Next.js
• 🎨 Tailwind CSS
• 🎯 shadcn/ui

📊 Тестовые данные можно брать здесь

🏆 Лидеры гонки:

1️⃣ Lovable.dev
✨ Быстрый старт
✨ Рабочий проект с первой попытки
⚠️ Небольшая доработка UI для графиков
➡️ Результат: y-money-mosaic (исходники тут)


2️⃣ Bolt.new
✨ Стабильная работа "из коробки"
✨ Отличная интеграция с Supabase
✨ Минимум проблем
⚠️ Консервативный дизайн
➡️ Результат: Personal Finance Dashboard

3️⃣ Replit Agent
✨ Спокойный процесс разработки
✨ Понятный траблшутинг
⚠️ Проблемы с графиками
➡️ Результат: Replit Finance Dashboard

😐 Середнячки и аутсайдеры:

🔸 Heyboss
❌ Проблемы с аутентификацией на этапе тестирования
✅ Быстрая генерация функций
⚠️ Нужна доработка кода и лучше ее делать в Cursor, т.к на небольшие изменения кредиты расходуются быстро.
➡️ Результат: Heyboss Finance Dashboard

🔸 Trae
❌ Нет рабочего кода
❌ Неэффективный траблшутинг

💡 Основные выводы:
• 🥇 Lovable и Bolt - лучшие для быстрых прототипов
• 🏃‍♂️ Replit Agent - для спокойной разработки
• 📋 Для успеха очень важно иметь четкое ТЗ перед стартом
• ⚠️ Не все AI-инструменты одинаково полезны

#AIdev #webdev #coding #dashboard #finance #tech #programming

#lovable #battle #check

Lovable 2.0 - проверка "боем" !

На первом занятии курса по AI-программированию и агентам мы делали браузерную игру-шутер

Вот такой результат у меня получился при помощи Lovable предыдущей версии при подготовке к занятию
Причем данный результат был получен при количестве итераций > 10. И мои попытки добавить звук выстрела и фоновую музыку так и не увенчались успехом (требовалось подгрузить свои собственные mp3 файлы).

Поэтому на самом занятии мы использовали replit agent 2.0 (ранее писал о нем здесь), который позволил получить хороший результат практически сразу за пару минут, и дальнейшие 2-3 итерации были потрачены на небольшие улучшения.

А теперь сравните, пожалуйста, с результатом на Lovable 2.0, который я получил за несколько минут + 3 итерации по корректировке кнопок перемещения и коррекции заваливания горизонта.
Результат с моей точки зрения значительно лучше Lovable предыдущей версии и на уровне replit agent 2.0, а нападающие "монстры" "из коробки" получились даже более симпатичными.

Чего мне не хватило - фоновую музыку "из коробки" получить не удалось (в replit она появилась сразу, lovable 2.0 все таки запросил Для работы вам нужно добавить файл background-music.mp3 в папку public/ вашего проекта.)

Можете повторить подобный эксперимент самостоятельно. Исходный промпт здесь

Как можно сэкономить на lovable подписке и не только писал здесь

На прошлой неделе на 6-ом занятии по AI-программированию мы делали синхронный переводчик для Zoom-звонков. Решение получилось универсальным — работает с любой системой ВКС через виртуальные аудио-устройства.

Протестировали сразу 3 варианта решения задачи:
• Cursor для разработки и railway для деплоя
• Replit
• Lovable

Во всех трех случаях для подготовки PRD я использовал Codeguide.dev - отличный инструмент, позволяет в режиме диалога с AI подготовить целый набор необходимой документации для написания софта методом Vibe Coding. Документация готовится под выбранный набор AI-кодеров. Также codeguide содержит внутри готовые шаблоны micro SaaS приложений под различные сценарии использования: например, с бэкендом для аутентификации пользователей или для оплаты.

Исходные заявки в codeguide.dev на подготовку PRD, а также финальные PRD можно посмотреть здесь.

Результаты тестирования

• Вариант с Cursor закончить за время занятия (2 часа) не удалось, но это скорее связано с тем, что задача ставилась сложнее - я хотел сделать систему с личным кабинетом пользователя, с аутентификацией на базе Clerk, и по закону подлости в определенный момент перестали работать обращения к Cursor-агенту через VPN, я уже не стал переключаться, тем более что по двум другим кодерам прогресс шел быстро.

• Вариант с Replit показал отличный результат раньше всех и потребовал небольшое количество итераций траблшутинга. Удалось полностью закончить приложение за отведенное время занятия. Вот ссылка на Github. Карточка проекта тут

• Вариант с Lovable стал показывать первые результаты практически одновременно с Replit, но потребовал значительно бОльшего количества итераций траблшутинга. Заканчивал приложение уже после занятия (github).

Ну а теперь про само приложение!

Как это работает 🔧

🎤 Система распознает речь через Web Speech API (фронтенд в браузере)
📤 Отправляет текст на перевод через OpenAI API (бэкенд - в облаке или на вашем PC/mac)
🗣 Синтезирует переведенную речь (фронтенд в браузере)
🎧 Передает аудио через виртуальный или обычный микрофон в видеоконференцию (зависит от сценария использования - см. ниже)

Настройка для разных сценариев ⚙️

Чтобы вас слышали на иностранном языке:
1️⃣ Запустить веб-приложение
2️⃣ Подключить виртуальный микрофон (BlackHole/VB-Cable) - в моем случае был VB-cable на Mac в браузере Safari
3️⃣ В ВКС выбрать виртуальное устройство как speaker. Микрофон оставить обычным (External Mic).
Вы говорите на родном языке. Приложение в браузере Safari/Chrome «слышит» это через External Mic. И передает это (Speaker) через VB-cable. Вы сами не слышите то, что слышит ваш собеседник, но видите, что ему говорят (т.к. в приложении работает текстовый перевод)

Чтобы слышать перевод на русском:
1️⃣ В ВКС подключить виртуальный микрофон как input
2️⃣ В системных настройках ОС: input = виртуальный микрофон, чтобы приложение "слышало", что говорит ваш собеседник, а output = внешний микрофон (External Mic), чтобы вы слышали перевод
3️⃣ Веб-приложение будет переводить и озвучивать через стандартный выход

Технические характеристики 📊

• Задержка перевода: до 1-2 секунд (зависит от того используете деплой в облаке или на своем ПК)
• Точность перевода: более 95% для разговорного контента
• Поддержка популярных ВКС: Zoom, Google Meet, Microsoft Teams и т.д.
• Кэширование переводов для ускорения повторных фраз (не во всех версиях реализовано)

Требования 💻

• Браузер с поддержкой Web Speech API (лучше всего Chrome или Safari)
• Действующий API-ключ OpenAI
• Наличие установленного виртуального аудиоустройства (BlackHole или VB-Cable)
• Стабильное интернет-соединение от 10 Мбит/с

Ограничения
• Поскольку все основные функции по транскрибации и синтезу речи реализованы в браузере через Web Speech API, то на мобильных устройствах будет доступен только текстовый перевод, синтез речи работать не будет.
• В зависимости от используемого браузера будет варьироваться количество доступных языков и голосов для транскрибации и синтеза

#realtime_translation #speech #video_conferencing #openai #web_audio #battle #lovable #replit #cursor #zoom