Skip to content

gpt-4-vision-preview モデル

gpt-4-vision-preview は画像を読み取ることができます

  • 画像をWebページに変換できます
  • 症例画像を渡して処方を提案させることができます
  • 注意:このモデルは4kで、追加の画像料金が発生します

curl の例

画像をWebページコードに変換する例です。他の言語の例は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.comsuibian を他のものに変更してください。例:https://2024.ddaiai.com でもアクセスできます

設定

以下の図の該当箇所で設定してください
OpenAiインターフェースアドレス:https://api.openai-hk.com
OpenAi API KEY: hk-あなたのapiKey
以下の図の該当箇所で設定してください
OpenAiインターフェースアドレス:https://api.openai-hk.com
OpenAi API KEY: hk-あなたのapiKey

cover

効果

入力ボックスで質問 cover