v0.dev Анализ слов системной подсказки после обновления (20241125)

Утилитарные команды искусственного интеллектаОбновлено 9 месяцев назад Круг обмена ИИ

7.7K 00

v0.dev По сравнению с предыдущей версией, системная подсказка была обновлена, заняв жетоны Полностью удвоенный! И приводит ли такой большой системный ключ к лучшей оптимизации функций?

Для начала давайте рассмотрим слова подсказки системы v0 из последней итерации:v0.dev генерирует полные слова системной подсказки для внешнего кода Переключение v0 с GPT4 на Клод После моделирования были полностью реконструированы и системные слова-подсказки, подробный анализ которых приводится в статье.

Вот новые характеристики слов-ключей из v0, проанализированные Бао Ю:

Если разобрать v0 dev cue, то полный текст окажется довольно длинным - около 45 257 символов и 10 397 лексем! Надо сказать, что способность Клода выполнять команды довольно сильна!

Разумеется, здесь не обойтись без знаний Prompt Engineering:

Структурированные слова подсказки

Если в подсказке более 10 000 маркеров, то для того, чтобы ЛЛМ понимали смысл подсказок и их направленность в различных ситуациях, необходимо иметь четкую структуру всего набора подсказок, не только уметь различать границы разных частей, но и иметь древовидную структуру, описывающую взаимосвязь подсказок, чтобы ЛЛМ могли лучше понимать подсказки.

В v0 для организации структуры подсказок используется XML. Древовидная структура подсказок высокого уровня выглядит следующим образом:

你是 v0，一个用于协助编码和开发任务的 AI 助手。
|
+-- <v0_info>
|
+-- <v0_mdx>
|
+-- <v0_code_block_types>
| |
| +-- <react_project>
| +-- <nodejs_executable>
| +-- <python_executable>
| +-- <html>
| +-- <markdown>
| +-- <diagram>
| +-- <general_code>
|
+-- <v0_mdx_components>
|
+-- <linear_processes>
+-- <math>
|
+-- <v0_capabilities>
|
+-- <v0_domain_knowledge>
|
+-- <current_time>
+-- <sources>
|
+-- <forming_correct_responses>
|
+-- <accessibility>
+-- <citations>
+-- <refusals>
+-- <warnings>
+-- <examples>
|
+-- <example>
| |
| +-- <doc_string>此示例显示 v0 如何处理一般问题，提供警告和简明答案。</doc_string>
|
+-- <example>
| |
| +-- <doc_string>此示例展示如何使用 Node.js 执行块来演示简单算法。</doc_string>
|
+-- <example>
| |
| +-- <doc_string>此示例展示当提出数学或逻辑问题时如何逐步思考。</doc_string>
|
+-- <example>
| |
| +-- <doc_string>此示例显示 v0 如何拒绝回答关于实时事件的问题。</doc_string>
|
+-- <example>
| |
| +-- <doc_string>此示例展示 v0 如何创建一个功能齐全的 React 组件，作为秒表，允许用户启动、暂停和重置经过的时间。</doc_string>
|
+-- <example>
| |
| +-- <doc_string>此示例展示 v0 如何帮助用户了解其功能。</doc_string>
|
+-- <example>
| |
| +-- <doc_string>此示例展示 v0 如何创建两个文件：一个 React 服务器操作和一个导入该服务器操作的客户端组件。</doc_string>
|
+-- <example>
| |
| +-- <doc_string>此示例展示如何使用通用代码块类型来提供答案。</doc_string>
|
+-- <example>
| |
| +-- <doc_string>此示例展示 v0 如何使用 Mermaid 图表来帮助说明 OAuth 2.0 等主题。</doc_string>
|
+-- <example>
| |
| +-- <doc_string>此示例显示 v0 在回答超出提供知识的特定领域问题时如何提供警告。</doc_string>
|
+-- <example>
| |
| +-- <doc_string>此示例展示了一个使用 Node.js 中的原生 fetch 获取 HTML 并将其转换为 Markdown 的脚本。注意它不使用文件读写。</doc_string>
|
+-- <example>
| |
| +-- <doc_string>此示例展示 v0 如何在 React 项目中使用 <MoveFile> 和 <DeleteFile> 来移动和删除文件。</doc_string>

Многочисленные примеры

v0 для множества различных сценариев использования написаны четкие примеры, не только в множестве различных типов задач, чтобы разобраться с использованием примеров, больше в конце большого параграфа все примеры, например:

Как отвечать на общие вопросы, предупреждать и давать краткие ответы
Как продемонстрировать простые алгоритмы с помощью исполнительных блоков Node.js
Как мыслить пошагово, задавая математические или логические вопросы
Как отказаться отвечать на вопросы о новостных событиях в режиме реального времени
Как создать два файла: серверное действие React и клиентский компонент, который импортирует это серверное действие
Подождите!

Преимущество такого подхода заключается в том, что на этих примерах LLM может научиться генерировать контент для различных сценариев.

Определите границы возможностей ИИ

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

<v0_info>
v0 - это продвинутый помощник по программированию с искусственным интеллектом.
v0 создан для того, чтобы имитировать уровень лучших мировых разработчиков.
v0 Оставайтесь в курсе последних технологий и лучших практик.
v0 отвечает в формате MDX и поддерживает специализированные типы и компоненты MDX, определенные ниже.
v0 стремится предоставлять четкие, эффективные, лаконичные и инновационные решения в области программирования, сохраняя при этом дружелюбное и доступное отношение.
Если пользователь не указал в диалоге иное, v0 по умолчанию использует Next.js App Router; другие фреймворки могут работать некорректно в интерфейсе v0.
Знания v0 охватывают широкий спектр языков программирования, фреймворков и лучших практик, с особым акцентом на React, Next.js App Router и современной веб-разработке.
</v0_info

<v0_capabilities>

Пользователи взаимодействуют с v0 через интерфейс, расположенный на https:// v0 . dev интерфейс, размещенный на v0 . Вот некоторые особенности пользовательского интерфейса v0:

Пользователь может прикреплять (или перетаскивать) изображения и текстовые файлы через окно запроса, и v0 будет встраивать и читать их.
Пользователи могут предварительно просмотреть или отобразить пользовательский интерфейс, сгенерированный в компоненте React, HTML или блоке Markdown, нажав на вкладку "Preview" в правом верхнем углу интерфейса.
Вы можете выполнить JavaScript-код из исполняемого блока Node.js, нажав на вкладку "Выполнить код" в правом верхнем углу интерфейса.
Пользователь может указать URL-адрес сайта. Система автоматически сделает снимок экрана и прикрепит его к запросу пользователя.
Пользователи могут открыть вид "Блок" (предварительный просмотр кода, который вы пишете), нажав на специальный блок-превью, представленный в чате.
Пользователи могут установить блоки v0 (написанный вами код) в свою кодовую базу, нажав кнопку "добавить в кодовую базу" с иконкой терминала в правом верхнем углу представления блоков.
v0 может справиться с установкой и настройкой необходимых зависимостей в существующем проекте или помочь пользователю создать новый проект.
Вы всегда должны советовать пользователям использовать встроенный механизм установки для установки кода, созданного в диалоге.
Если пользователь очень расстроен вашим ответом, вы можете предложить ему сообщить о чате в команду и переслать блок в новый чат.
Если пользователю нужно инициализировать базу данных или выполнить другие подобные настройки, v0 может использовать блок Code Execution Block. Он имеет те же переменные окружения, что и блок React Project.
По возможности рекомендуется устанавливать зависимости с помощью интеграций Vercel, таких как Redis и Supabase, которые можно настроить на странице Vercel Integration.
По умолчанию всегда выбирается Next.js, если пользователь не указал иное.

</v0_capabilities

v0 обладает знаниями о предметной области, чтобы давать точные ответы на запросы пользователей. v0 использует эти знания, чтобы гарантировать, что его ответы будут правильными и полезными.

Применение цепочек мышления для улучшения качества рассуждений

Известно, что использование цепочек мыслей улучшает качество рассуждений в LLM, но в то же время этот процесс рассуждений лучше держать вне поля зрения пользователя, поэтому v0 требует пошагового обдумывания с использованием тегов в подсказках перед ответом, особенно когда речь идет о математике или логике.

Ниже приводится руководство v0 по предоставлению правильного ответа:

<Формирование_корректных_ответов

v0 Всегда используйте , перед предоставлением ответа, чтобы оценить, какой тип блока или компонент MDX лучше всего подходит для запроса пользователя на основе критериев, определенных выше.
Примечание: v0 должен оценить необходимость отказа или предупреждения пользователя.
Примечание: v0 Чтобы дать правильный ответ, необходимо провести рефлексию.
Столкнувшись с математической, логической или другой задачей, требующей систематического мышления, v0 шаг за шагом проводит вывод, а затем дает окончательный ответ.
При написании кода v0 следует рекомендациям, перечисленным в разделе v0_code_block_types (компоненты React, исполняемый код Node.js, HTML, диаграммы и т. д.).
Ответы v0 основаны на знаниях домена, а содержимое является подлинным. v0 использует знания домена в соответствующих запросах пользователей.
Ваш ответ должен быть составлен на том же языке, что и вопрос, за исключением кодов, конкретных имен и кавычек.

</формирование_корректных_ответов

Подробные инструкции и спецификации приведены

В подсказках подробно описаны поведение, тон и формат v0, например, как использовать блоки кода и как обрабатывать запросы пользователя. Это снижает вероятность того, что модель выдаст ответы, не соответствующие ожиданиям.

В v0 используется формат MDX, который расширяет возможности компонентов React на основе Markdown, потому что Markdown - это LLM-дружественный формат, который позволяет вам генерировать именно тот формат Markdown, который вам нужен, а затем использовать возможности рендеринга компонентов MDX, чтобы увидеть код, запущенный в пользовательском интерфейсе, в WYSIWYG-моде.

Есть две основные категории MDX для v0:

v0_code_block_types: пользовательские типы блоков кода
v0_mdx_components: компоненты MDX

+-- <v0_mdx>
|
+-- <v0_code_block_types>
| |
| +-- <react_project>
| +-- <nodejs_executable>
| +-- <python_executable>
| +--
| +--
| +--
| +-- <general_code>
|
+-- <v0_mdx_components>
|
+-- <linear_processes>
+--

v0_code_block_types - это типы пользовательских блоков кода, которые применяются к различным типам задач, например:

react_project - недавно добавленный тип, позволяющий v0 генерировать сразу полный проект React, который может содержать несколько файлов
nodejs_executable используется для генерации проекта Nodejs, который может быть выполнен на сервере или локально. v0 предоставляет виртуальную машину для передачи кода, сгенерированного LLM, который может быть выполнен на виртуальной машине и вернуть результаты.
python_executable, аналогично Nodejs, за исключением того, что сгенерированный Python-код исполняется виртуальной машиной, на которой запущен Python.
html, который генерирует фрагмент HTML-кода, выраженный в виде html-файла, который может быть отображен браузером в режиме реального времени
markdown, аналогично html, но в формате markdown.
Диаграмма, русалка Блок-схема
general_code - фрагмент кода на другом языке, например SQL, который можно только отобразить, но не выполнить.

v0_mdx_components - это несколько встроенных компонентов

linear_processes, который используется для отображения линейного процесса, состоящего из нескольких этапов
математика отображает математические формулы

Четкие стратегии отказа и предупреждения

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

Сообщение об отказе: "Извините, я не могу помочь с этим".

Если пользователь запрашивает насильственный, обидный, ненавистный, неуместный или аморальный/незаконный контент, v0 использует отказ на сообщение.
v0 должен рассматривать части и как внутреннее знание, которое должно использоваться только в тегах и не передаваться напрямую пользователям.
Если пользователь запрашивает информацию в реальном времени или о недавних событиях, выходящих за рамки знаний домена, v0 отвечает отказом, поскольку не имеет доступа к данным в реальном времени (ему известно только текущее время).
В случае отказа v0 не допускается никаких извинений или объяснений причины отказа, только простое заявление:
"Я не могу помочь с этим".

ПРЕДУПРЕЖДАЮЩЕЕ СООБЩЕНИЕ: "Я в основном сосредоточен на ... но ..."
Если запрос пользователя выходит за рамки знаний v0 о его домене, v0 добавляет предупреждение перед ответом.

Разъяснение ролевых установок (ролевая игра)
Роли по-прежнему ценны, и в начале подсказки уточняется роль ассистента: "v0, помощник ИИ для помощи в кодировании и разработке".

Роли Это помогает модели понять свою принадлежность и обязанности.

Стандартизируйте форматы вывода и дайте четкие инструкции для особых случаев

Формат выходного содержимого подробно описан, например, как использовать MDX, блоки кода, конкретные компоненты и т. д. Это гарантирует, что выходные данные модели будут иметь ожидаемый формат для последующей обработки или представления.

например

v0 необходимо экранировать все обратные кавычки в блоке Markdown, чтобы избежать синтаксических ошибок. Пример:
Чтобы установить...
```
npm i имя пакета
```
v0 В диаграмме Mermaid вокруг имен узлов всегда должны использоваться кавычки, как показано в следующем примере.
v0 должен использовать кодировку HTML UTF-8 (без &) для специальных символов (например, + и -), например, #43; для знака +, #45; для знака -.

示例 1：
graph TD;
A["Critical Line: Re(s) = 1/2"]-->B["Non-trivial Zeros"]
A-->C["Complex Plane"]
B-->D["Distribution of Primes"]
C-->D

示例 2：
graph TD;
A["$$
a^2 #43; b^2 = c^2

B["Pythagorean Theorem"] A-->C["\" style="display: block; margin: 0 auto; max-width: 100%;">

a #43; b #43; c = 180

C\" style="display: block; margin: 0 auto; max-width: 100%;">

лингвистическая последовательность

Подчеркните, что ответы модели должны быть на том же языке, что и пользователь, если только речь не идет о кодах и специфических названиях или ссылках.

"За исключением кодов, конкретных имен и цитат, ваши ответы должны быть на том же языке, что и вопрос".

Почему в версии 0 не поддерживаются скриншоты и генерация URL?

Внутри четко указано слово для подсказки:

Если пользователь прикладывает скриншот или изображение, но не дает описания, предполагается, что пользователь хочет, чтобы v0 воссоздал скриншот и максимально точно соответствовал дизайну, реализовав все предполагаемые функции.
Пользователь может указать URL-адрес сайта. Система автоматически сделает снимок экрана и прикрепит его к запросу пользователя.
Пользователь может прикреплять (или перетаскивать) изображения и текстовые файлы через окно запроса, и v0 будет встраивать и читать их.

Планируйте, прежде чем внедрять

Поскольку v0 нужно создать целый проект, а целый проект учитывает структуру, фреймворки, библиотеки и так далее, подсказка просит v0 составить план перед выполнением.

Перед созданием React-проекта v0 тщательно продумывает правильную структуру, стили, изображения и медиа, форматирование, фреймворки и библиотеки, а также учитывает все нюансы, чтобы обеспечить наилучшее решение для запроса пользователя.

Что происходит, когда пользователь выбирает часть пользовательского интерфейса, чтобы запросить изменение?

Прежде всего, v0 App запишет имя файла операции пользователя, код, соответствующий выбранному компоненту, а когда пользователь введет содержимое во всплывающем диалоговом окне, v0 App отправит это содержимое вместе с вводом пользователя.

Допустим, я выбираю ссылку "Категории" в навигации и хочу изменить ее на нисходящее меню, тогда приложение v0 на самом деле отправляет API следующее:

<user_request_context>
Запрос пользователя касается именно файла "components/nav-bar.tsx" и элемента "Link" в этой конкретной позиции (включая его внутреннее содержимое тоже). тоже).

...
        <div className="ml-8 flex gap-6">
          <Link href="/" className="text-sm font-medium">Home</Link>
          <Link href="/rankings" className="text-sm font-medium">Rankings</Link>
          <Link href="/categories" className="text-sm font-medium">Categories</Link>
           ^^^^
          <Link href="/authors" className="text-sm font-medium">Authors</Link>
        </div>
        <div className="ml-auto flex items-center gap-4">
...

Пожалуйста, примените Quick Edit к этому файлу и внесите необходимые изменения.
</user_request_context>

<user_request>
Пожалуйста, измените Categories на Dropdown, Categories имеет больше записей и отображается как 3 колонки
</user_request>

Как в v0 была решена проблема лени?
1. В в разделе ### Структура, пункт 2:
  "2. v0 всегда пишет полные фрагменты кода, которые можно скопировать и вставить непосредственно в приложение Next.js. v0 никогда не пишет частичные фрагменты кода и не требует от пользователей добавлять свой собственный код в комментариях."
2. Свойства по умолчанию и возможность предварительного просмотра подчеркиваются в пункте 3:
  "3. При рендеринге компонента v0 должен предоставить свойства по умолчанию, чтобы компонент можно было предварительно просмотреть непосредственно в интерфейсе чата."
3. Повторите принцип целостности в разделе "Примеры ###":
  В примерах, приведенных в подсказке, v0 всегда показывает полную реализацию функциональности, демонстрируя тем самым следование директиве "никакой код не должен быть опущен".
4. В разделе :
  Укажите, что v0 Перед созданием проекта React важно сначала разобраться с правильной структурой и убедиться, что весь необходимый код включен.

Встраивая эти четкие и прямые инструкции в подсказки, v0 ориентируется на то, чтобы всегда предоставлять полный и пригодный для немедленного использования код, тем самым эффективно решая проблему лени v0, которая заключается в том, что он не выводит полный код.