OpenAi-HKМодель gpt-4-vision-preview
gpt-4-vision-preview может помочь вам анализировать изображения
- Может генерировать веб-страницы из ваших изображений
- Покажите ему медицинское изображение; пусть он выпишет вам лекарства
- Внимание: эта модель с 4k токенами, за изображения взимается дополнительная плата
Пример curl
Пример генерации кода веб-страницы из изображения, для примеров на других языках используйте chatgpt для конвертации
shell
curl https://api.openai-hk.com/v1/chat/completions \
-H 'Authorization: Bearer hk-замените-на-ваш-ключ' \
-H "Content-Type: application/json" \
-d '{
"max_tokens": 1200,
"model": "gpt-4-vision-preview",
"messages": [
{
"role": "system",
"content": "You are an expert Tailwind developer\nYou take screenshots of a reference web page from the user, and then build single page apps \nusing Tailwind, HTML and JS.\nYou might also be given a screenshot(The second image) of a web page that you have already built, and asked to\nupdate it to look more like the reference image(The first image).\n\n- Make sure the app looks exactly like the screenshot.\n- Pay close attention to background color, text color, font size, font family, \npadding, margin, border, etc. Match the colors and sizes exactly.\n- Use the exact text from the screenshot.\n- Do not add comments in the code such as \"<!-- Add other navigation links as needed -->\" and \"<!-- ... other news items ... -->\" in place of writing the full code. WRITE THE FULL CODE.\n- Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like \"<!-- Repeat for each news item -->\" or bad things will happen.\n- For images, use placeholder images from https://placehold.co and include a detailed description of the image in the alt text so that an image generation AI can generate the image later.\n\nIn terms of libraries,\n\n- Use this script to include Tailwind: <script src=\"https://cdn.tailwindcss.com\"></script>\n- You can use Google Fonts\n- Font Awesome for icons: <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"></link>\n\nReturn only the full code in <html></html> tags.\nDo not include markdown \"```\" or \"```html\" at the start or end."
},
{
"role": "user",
"content": [
{
"type": "text",
"text": "将图片生成网页代码"
},
{
"type": "image_url",
"image_url": {
"url": "data:image/jpeg;base64,xxxx=图片链接或者图片base64"
}
}
]
}
]
}'curl https://api.openai-hk.com/v1/chat/completions \
-H 'Authorization: Bearer hk-замените-на-ваш-ключ' \
-H "Content-Type: application/json" \
-d '{
"max_tokens": 1200,
"model": "gpt-4-vision-preview",
"messages": [
{
"role": "system",
"content": "You are an expert Tailwind developer\nYou take screenshots of a reference web page from the user, and then build single page apps \nusing Tailwind, HTML and JS.\nYou might also be given a screenshot(The second image) of a web page that you have already built, and asked to\nupdate it to look more like the reference image(The first image).\n\n- Make sure the app looks exactly like the screenshot.\n- Pay close attention to background color, text color, font size, font family, \npadding, margin, border, etc. Match the colors and sizes exactly.\n- Use the exact text from the screenshot.\n- Do not add comments in the code such as \"<!-- Add other navigation links as needed -->\" and \"<!-- ... other news items ... -->\" in place of writing the full code. WRITE THE FULL CODE.\n- Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like \"<!-- Repeat for each news item -->\" or bad things will happen.\n- For images, use placeholder images from https://placehold.co and include a detailed description of the image in the alt text so that an image generation AI can generate the image later.\n\nIn terms of libraries,\n\n- Use this script to include Tailwind: <script src=\"https://cdn.tailwindcss.com\"></script>\n- You can use Google Fonts\n- Font Awesome for icons: <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"></link>\n\nReturn only the full code in <html></html> tags.\nDo not include markdown \"```\" or \"```html\" at the start or end."
},
{
"role": "user",
"content": [
{
"type": "text",
"text": "将图片生成网页代码"
},
{
"type": "image_url",
"image_url": {
"url": "data:image/jpeg;base64,xxxx=图片链接或者图片base64"
}
}
]
}
]
}'Онлайн-тестирование
Внимание
1.Перейдите на https://gpt4v.ddaiai.com/ (если заблокировано, измените префикс поддомена на suibian)
2.Если обнаружите, что заблокировано, можете самостоятельно изменить адрес https://suibian.ddaiai.com замените suibian на другое, например https://2024.ddaiai.com — все будут доступны
Настройка
Затем настройте в соответствующих местах на изображении ниже
Адрес OpenAi API: https://api.openai-hk.com
OpenAi API KEY: hk-ваш-apiKeyЗатем настройте в соответствующих местах на изображении ниже
Адрес OpenAi API: https://api.openai-hk.com
OpenAi API KEY: hk-ваш-apiKey
Результат
Поле ввода для диалога с вопросами
