Открытый WebUI для оптимизированной генерации и представления кода

Общее введение

Откройте WebUI Artifacts Overhaul - форк-проект на основе Open WebUI, созданный разработчиком Ником Тоньюмом. Это инструмент с открытым исходным кодом, который фокусируется на улучшении функциональности ИИ для генерации и представления кода. Пользователи могут использовать его, чтобы позволить ИИ генерировать код, редактировать и просматривать результаты непосредственно в интерфейсе. Этот инструмент поддерживает локальное развертывание и совместим с Оллама Он подходит как разработчикам для быстрого тестирования своего кода, так и новичкам для изучения программирования. В настоящее время проект находится в стадии бета-версии, и пользователи могут бесплатно загрузить его с GitHub. В нем есть редактор кода, предварительный просмотр в реальном времени и сравнение различий, а также поддержка нескольких языков программирования.

Список функций

• кодовая канва (вычислительная техника): AI-генерированный код отображается справа, с помощью VSCode-подобного редактора Monaco, который позволяет переключать файлы и версии.
• Сравнение различий: AI При изменении кода выделите измененную часть и переключите вид сравнения одним щелчком мыши.
• Предварительный просмотр дизайнаПоддержка HTML, CSS, JavaScript для предварительного просмотра в реальном времени, встроенные стили Tailwind, компоненты React также могут быть отображены.
• Поддержка React: Компоненты React могут быть просмотрены напрямую, с коэффициентом успешности около 80%, и должны включать в себя export default.
• Поддержка нескольких языков: Поддерживает JavaScript, Python, C#, Java, PHP и многие другие языки.
• просмотр файлов: Блоки кода в чате отображаются в файле для удобства управления.

Использование помощи

Процесс установки

Open WebUI Artifacts Overhaul требует локального развертывания. Ниже приведены подробные шаги по установке:

Установка с помощью Docker

1. Проверка окружения
   • Убедитесь, что Docker установлен и запущен.
   • Если у вас есть графический процессор Nvidia, вам необходимо установить Инструментарий Nvidia CUDA Toolkit.
2. Pull Code
   • Откройте терминал и клонируйте проект:

     git clone https://github.com/nick-tonjum/open-webui-artifacts-overhaul.git
     

   • Перейдите в каталог:

     cd open-webui-artifacts-overhaul
     

3. Запуск Docker
   • Основные команды (режим процессора):

     docker run -d -p 3000:8080 -v open-webui:/app/backend/data --name open-webui ghcr.io/open-webui/open-webui:main
     

   • Если используется графический процессор:

     docker run -d -p 3000:8080 --gpus all -v open-webui:/app/backend/data --name open-webui ghcr.io/open-webui/open-webui:cuda
     

   • С интеграцией Ollama:

     docker run -d -p 3000:8080 -v ollama:/root/.ollama -v open-webui:/app/backend/data --name open-webui ghcr.io/open-webui/open-webui:ollama
     

4. интерфейс доступа
   • После завершения установки откройте браузер и введите http://localhost:3000.

Установка с помощью Python

1. Подготовка среды
   • Установите Python 3.11 или 3.10. Рекомендуется использовать Conda для создания среды:

     conda create -n open-webui python=3.11
     conda activate open-webui
     

2. Установка зависимостей
   • После клонирования проекта перейдите в каталог:

     cd open-webui-artifacts-overhaul
     

   • Установите внешние зависимости:

     npm install --no-package-lock
     npm install @floating-ui/utils
     npm run build
     

   • Перейдите в каталог бэкенда и установите зависимости бэкенда:

     cd backend
     pip install -r requirements.txt
     

3. Начальные услуги
   • Бег:

     ./start.sh
     

   • интервью http://localhost:8080.

Настройка моделей искусственного интеллекта

• Оллама: После загрузки перейдите в раздел "Настройки" и введите локальный адрес Ollama (например. http://localhost:11434).
• API OpenAI: Введите ключ API в настройках или добавьте параметры при использовании Docker:

  -e OPENAI_API_KEY=your_secret_key

Основные функции

кодовая канва (вычислительная техника)

• Введите требование в поле чата, например "Написать HTML-страницу с кнопками".
• После того как ИИ сгенерирует код, справа появится редактор.
• Щелкните верхнюю стрелку, чтобы переключить файлы или версии.
• Измените код прямо в редакторе, сохраните его и обновите чат.

Сравнение различий

• Введите "change button to green", и AI вернет новый код.
• Нажмите на кнопку "Различия", зеленая часть предназначена для добавлений, а красная - для удалений.
• Нажмите "Закрыть различия", чтобы восстановить нормальный вид.

Предварительный просмотр дизайна

• Создайте HTML или React После ввода кода нажмите "Вид дизайна".
• В правой части отображаются веб-эффекты, например, стили кнопок.
• Пишите с помощью Tailwind <div>Тогда вы увидите красный фон.
• Чтобы предварительный просмотр работал, компонент React должен быть синтаксически корректным.

Поддержка нескольких языков

• Укажите язык, например "Написать функцию сортировки на Python".
• Код отображается с правой стороны и поддерживает копирование для локального запуска.

Пример работы

1. Сгенерировать код
   • Исходные данные : "Напишите функцию JavaScript, которая отображает время".
   • В правом редакторе отображается код.
2. Эффект предварительного просмотра
   • Нажмите на "Design View", чтобы увидеть, как отображается время.
   • Введите "изменить размер шрифта времени", и AI обновит код.
3. Проверка на наличие несоответствий
   • Нажмите на кнопку "Разница", чтобы увидеть изменение размера шрифта.
   • Сохраните новую версию.
4. Управление версиями
   • Переключайтесь между "Версией 1" и "Версией 2" вверху, чтобы сравнить изменения.

предостережение

• Проект является бета-версией и может содержать ошибки; если вы столкнулись с проблемами, отправьте сообщение о них на GitHub.
• React preview success rate 80%, сложные компоненты могут не работать.
• Для установки рекомендуется использовать Docker, он прост и стабилен.

Инструмент интуитивно понятен, и разработчики могут использовать его для быстрой генерации кода и его тестирования. Новички также могут изучать логику программирования с помощью искусственного интеллекта.

сценарий применения

1. внешняя разработка
   Если вам нужно быстро написать веб-страницу, используйте его для генерации HTML и CSS и предварительного просмотра результатов в режиме реального времени.
2. Обучение программированию
   Введите простое требование, посмотрите на код, сгенерированный искусственным интеллектом, измените его и посмотрите на изменения.
3. отладка кода
   Проверьте AI-модифицированный код с помощью diff-сравнений, чтобы убедиться в его соответствии требованиям.

QA

1. Какие модели поддерживаются?
   Поддержка собственных моделей Ollama и API OpenAI, готовых к использованию после настройки.
2. Почему предварительный просмотр React иногда не работает?
   Текущий коэффициент успешности 80%, сложный код или отсутствует export default Возникнет ошибка. Разработчик улучшает ее.
3. Как обновить версию?
   Те, у кого есть Docker, могут использовать Watchtower:

   docker run --rm --volume /var/run/docker.sock:/var/run/docker.sock containrrr/watchtower --run-once open-webui