{"id":13251,"date":"2024-11-11T17:12:39","date_gmt":"2024-11-11T16:12:39","guid":{"rendered":"https:\/\/imaginario27.com\/?post_type=project&#038;p=13251"},"modified":"2024-11-11T17:12:39","modified_gmt":"2024-11-11T16:12:39","slug":"gpt-4-vision-web-app","status":"publish","type":"project","link":"https:\/\/imaginario27.com\/en\/projects\/gpt-4-vision-web-app\/","title":{"rendered":"GPT-4 Vision Web App"},"content":{"rendered":"<p>The GPT-4 Vision App web application is built with Nuxt 3 and integrates OpenAI\u2019s GPT-4 Vision API to analyze images. It allows users to select a predefined image, enter a descriptive query, and receive a detailed analysis based on both the image and provided text. This project leverages OpenAI&#8217;s API for image and text-based interactions, offering a complete and advanced experience.<\/p>\n<h2>Features and Functionalities<\/h2>\n<ul>\n<li><strong>Image Analysis<\/strong>: Uses OpenAI\u2019s GPT-4 Vision API to analyze a selection of predefined images based on user-provided queries.<\/li>\n<li><strong>Markdown Support<\/strong>: The analysis results are formatted using Markdown, providing a structured and easy-to-read output.<\/li>\n<li><strong>Dynamic Image Selection<\/strong>: Users can choose different images from a dropdown list for analysis.<\/li>\n<li><strong>Nuxt 3 Integration<\/strong>: Built with Nuxt 3, ensuring fast and modular development.<\/li>\n<\/ul>\n<h2>Screenshots<\/h2>\n<p><a href=\"https:\/\/imaginario27.com\/wp-content\/uploads\/2024\/11\/gpt-4-vision-web-app-image-select.jpg\" data-lbwps-width=\"1200\" data-lbwps-height=\"1046\" data-lbwps-srcsmall=\"https:\/\/imaginario27.com\/wp-content\/uploads\/2024\/11\/gpt-4-vision-web-app-image-select-300x262.jpg\"><img decoding=\"async\" class=\"alignnone size-full wp-image-13242 lazyload\" data-src=\"https:\/\/imaginario27.com\/wp-content\/uploads\/2024\/11\/gpt-4-vision-web-app-image-select.jpg\" alt=\"Image selection - GPT-4 Vision Web App\" width=\"1200\" height=\"1046\" data-srcset=\"https:\/\/imaginario27.com\/wp-content\/uploads\/2024\/11\/gpt-4-vision-web-app-image-select.jpg 1200w, https:\/\/imaginario27.com\/wp-content\/uploads\/2024\/11\/gpt-4-vision-web-app-image-select-980x854.jpg 980w, https:\/\/imaginario27.com\/wp-content\/uploads\/2024\/11\/gpt-4-vision-web-app-image-select-480x418.jpg 480w\" data-sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1200px, 100vw\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1046;\" \/><\/a> <a href=\"https:\/\/imaginario27.com\/wp-content\/uploads\/2024\/11\/gpt-4-vision-web-app-output.jpg\" data-lbwps-width=\"1200\" data-lbwps-height=\"1178\" data-lbwps-srcsmall=\"https:\/\/imaginario27.com\/wp-content\/uploads\/2024\/11\/gpt-4-vision-web-app-output-300x295.jpg\"><img decoding=\"async\" class=\"alignnone size-full wp-image-13248 lazyload\" data-src=\"https:\/\/imaginario27.com\/wp-content\/uploads\/2024\/11\/gpt-4-vision-web-app-output.jpg\" alt=\"Analysis - GPT-4 Vision Web App\" width=\"1200\" height=\"1178\" data-srcset=\"https:\/\/imaginario27.com\/wp-content\/uploads\/2024\/11\/gpt-4-vision-web-app-output.jpg 1200w, https:\/\/imaginario27.com\/wp-content\/uploads\/2024\/11\/gpt-4-vision-web-app-output-980x962.jpg 980w, https:\/\/imaginario27.com\/wp-content\/uploads\/2024\/11\/gpt-4-vision-web-app-output-480x471.jpg 480w\" data-sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1200px, 100vw\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1178;\" \/><\/a><\/p>\n<h2>Demo<\/h2>\n<p>Using the app incurs costs due to token consumption. For this reason, a demo must be requested to showcase the application.<\/p>\n<h2>How to Use<\/h2>\n<ol>\n<li>Select an image from the dropdown list.<\/li>\n<li>Enter a descriptive query in the text area, such as \u201cAnalyze the architectural details of this building.\u201d<\/li>\n<li>Click the <strong>Analyze<\/strong> button to process the image.<\/li>\n<li>View the analysis result below, formatted with Markdown for clarity.<\/li>\n<\/ol>\n<h2>Repository<\/h2>\n<p>Discover the project on GitHub by clicking here: <a href=\"https:\/\/github.com\/Imaginario27\/scrimba-gpt-4-vision\" target=\"_blank\" rel=\"noopener\">GPT-4 Vision App<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The GPT-4 Vision App web application is built with Nuxt 3 and integrates OpenAI\u2019s GPT-4 Vision API to analyze images. It allows users to select a predefined image, enter a descriptive query, and receive a detailed analysis based on both the image and provided text. This project leverages OpenAI&#8217;s API for image and text-based interactions, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":13245,"comment_status":"open","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"project_category":[114],"project_tag":[],"class_list":["post-13251","project","type-project","status-publish","has-post-thumbnail","hentry","project_category-front-end-web-development","clientes-imaginario27","formatos-horizontal-format","tecnologias-ai-artificial-intelligence","tecnologias-html-en","tecnologias-javascript-en","tecnologias-nuxt-en","tecnologias-openai-en","tecnologias-tailwind-css-en","tecnologias-typescript-en","tecnologias-vue-en"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>GPT-4 Vision Web App - Imaginario27<\/title>\n<meta name=\"description\" content=\"GPT-4 Vision App: analyze images with custom queries using Nuxt 3 and OpenAI\u2019s API to obtain detailed results.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/imaginario27.com\/en\/projects\/gpt-4-vision-web-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"GPT-4 Vision Web App - Imaginario27\" \/>\n<meta property=\"og:description\" content=\"GPT-4 Vision App: analyze images with custom queries using Nuxt 3 and OpenAI\u2019s API to obtain detailed results.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/imaginario27.com\/en\/projects\/gpt-4-vision-web-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Imaginario27\" \/>\n<meta property=\"og:image\" content=\"https:\/\/imaginario27.com\/wp-content\/uploads\/2024\/11\/gpt-4-vision-web-app.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"1150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/imaginario27.com\\\/en\\\/projects\\\/gpt-4-vision-web-app\\\/\",\"url\":\"https:\\\/\\\/imaginario27.com\\\/en\\\/projects\\\/gpt-4-vision-web-app\\\/\",\"name\":\"GPT-4 Vision Web App - Imaginario27\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/imaginario27.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/imaginario27.com\\\/en\\\/projects\\\/gpt-4-vision-web-app\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/imaginario27.com\\\/en\\\/projects\\\/gpt-4-vision-web-app\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/imaginario27.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/gpt-4-vision-web-app.jpg\",\"datePublished\":\"2024-11-11T16:12:39+00:00\",\"description\":\"GPT-4 Vision App: analyze images with custom queries using Nuxt 3 and OpenAI\u2019s API to obtain detailed results.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/imaginario27.com\\\/en\\\/projects\\\/gpt-4-vision-web-app\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/imaginario27.com\\\/en\\\/projects\\\/gpt-4-vision-web-app\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/imaginario27.com\\\/en\\\/projects\\\/gpt-4-vision-web-app\\\/#primaryimage\",\"url\":\"https:\\\/\\\/imaginario27.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/gpt-4-vision-web-app.jpg\",\"contentUrl\":\"https:\\\/\\\/imaginario27.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/gpt-4-vision-web-app.jpg\",\"width\":1600,\"height\":1150,\"caption\":\"GPT-4 Vision Web App\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/imaginario27.com\\\/en\\\/projects\\\/gpt-4-vision-web-app\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/imaginario27.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Projects\",\"item\":\"https:\\\/\\\/imaginario27.com\\\/en\\\/projects\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"GPT-4 Vision Web App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/imaginario27.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/imaginario27.com\\\/en\\\/\",\"name\":\"Imaginario27\",\"description\":\"Porfolio de trabajos creativos\",\"publisher\":{\"@id\":\"https:\\\/\\\/imaginario27.com\\\/en\\\/#\\\/schema\\\/person\\\/772d8c794bad977a3d9ad0dcc0b9a3d5\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/imaginario27.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/imaginario27.com\\\/en\\\/#\\\/schema\\\/person\\\/772d8c794bad977a3d9ad0dcc0b9a3d5\",\"name\":\"Imaginario27\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/imaginario27.com\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/imaginario27-imagotipo.png\",\"url\":\"https:\\\/\\\/imaginario27.com\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/imaginario27-imagotipo.png\",\"contentUrl\":\"https:\\\/\\\/imaginario27.com\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/imaginario27-imagotipo.png\",\"width\":1000,\"height\":1000,\"caption\":\"Imaginario27\"},\"logo\":{\"@id\":\"https:\\\/\\\/imaginario27.com\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/imaginario27-imagotipo.png\"},\"sameAs\":[\"https:\\\/\\\/imaginario27.com\\\/\",\"https:\\\/\\\/www.instagram.com\\\/imaginario27\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"GPT-4 Vision Web App - Imaginario27","description":"GPT-4 Vision App: analyze images with custom queries using Nuxt 3 and OpenAI\u2019s API to obtain detailed results.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/imaginario27.com\/en\/projects\/gpt-4-vision-web-app\/","og_locale":"en_US","og_type":"article","og_title":"GPT-4 Vision Web App - Imaginario27","og_description":"GPT-4 Vision App: analyze images with custom queries using Nuxt 3 and OpenAI\u2019s API to obtain detailed results.","og_url":"https:\/\/imaginario27.com\/en\/projects\/gpt-4-vision-web-app\/","og_site_name":"Imaginario27","og_image":[{"width":1600,"height":1150,"url":"https:\/\/imaginario27.com\/wp-content\/uploads\/2024\/11\/gpt-4-vision-web-app.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/imaginario27.com\/en\/projects\/gpt-4-vision-web-app\/","url":"https:\/\/imaginario27.com\/en\/projects\/gpt-4-vision-web-app\/","name":"GPT-4 Vision Web App - Imaginario27","isPartOf":{"@id":"https:\/\/imaginario27.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/imaginario27.com\/en\/projects\/gpt-4-vision-web-app\/#primaryimage"},"image":{"@id":"https:\/\/imaginario27.com\/en\/projects\/gpt-4-vision-web-app\/#primaryimage"},"thumbnailUrl":"https:\/\/imaginario27.com\/wp-content\/uploads\/2024\/11\/gpt-4-vision-web-app.jpg","datePublished":"2024-11-11T16:12:39+00:00","description":"GPT-4 Vision App: analyze images with custom queries using Nuxt 3 and OpenAI\u2019s API to obtain detailed results.","breadcrumb":{"@id":"https:\/\/imaginario27.com\/en\/projects\/gpt-4-vision-web-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/imaginario27.com\/en\/projects\/gpt-4-vision-web-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/imaginario27.com\/en\/projects\/gpt-4-vision-web-app\/#primaryimage","url":"https:\/\/imaginario27.com\/wp-content\/uploads\/2024\/11\/gpt-4-vision-web-app.jpg","contentUrl":"https:\/\/imaginario27.com\/wp-content\/uploads\/2024\/11\/gpt-4-vision-web-app.jpg","width":1600,"height":1150,"caption":"GPT-4 Vision Web App"},{"@type":"BreadcrumbList","@id":"https:\/\/imaginario27.com\/en\/projects\/gpt-4-vision-web-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/imaginario27.com\/en\/"},{"@type":"ListItem","position":2,"name":"Projects","item":"https:\/\/imaginario27.com\/en\/projects\/"},{"@type":"ListItem","position":3,"name":"GPT-4 Vision Web App"}]},{"@type":"WebSite","@id":"https:\/\/imaginario27.com\/en\/#website","url":"https:\/\/imaginario27.com\/en\/","name":"Imaginario27","description":"Porfolio de trabajos creativos","publisher":{"@id":"https:\/\/imaginario27.com\/en\/#\/schema\/person\/772d8c794bad977a3d9ad0dcc0b9a3d5"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/imaginario27.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/imaginario27.com\/en\/#\/schema\/person\/772d8c794bad977a3d9ad0dcc0b9a3d5","name":"Imaginario27","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/imaginario27.com\/wp-content\/uploads\/2020\/05\/imaginario27-imagotipo.png","url":"https:\/\/imaginario27.com\/wp-content\/uploads\/2020\/05\/imaginario27-imagotipo.png","contentUrl":"https:\/\/imaginario27.com\/wp-content\/uploads\/2020\/05\/imaginario27-imagotipo.png","width":1000,"height":1000,"caption":"Imaginario27"},"logo":{"@id":"https:\/\/imaginario27.com\/wp-content\/uploads\/2020\/05\/imaginario27-imagotipo.png"},"sameAs":["https:\/\/imaginario27.com\/","https:\/\/www.instagram.com\/imaginario27\/"]}]}},"_links":{"self":[{"href":"https:\/\/imaginario27.com\/en\/wp-json\/wp\/v2\/project\/13251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/imaginario27.com\/en\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/imaginario27.com\/en\/wp-json\/wp\/v2\/types\/project"}],"author":[{"embeddable":true,"href":"https:\/\/imaginario27.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/imaginario27.com\/en\/wp-json\/wp\/v2\/comments?post=13251"}],"version-history":[{"count":0,"href":"https:\/\/imaginario27.com\/en\/wp-json\/wp\/v2\/project\/13251\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/imaginario27.com\/en\/wp-json\/wp\/v2\/media\/13245"}],"wp:attachment":[{"href":"https:\/\/imaginario27.com\/en\/wp-json\/wp\/v2\/media?parent=13251"}],"wp:term":[{"taxonomy":"project_category","embeddable":true,"href":"https:\/\/imaginario27.com\/en\/wp-json\/wp\/v2\/project_category?post=13251"},{"taxonomy":"project_tag","embeddable":true,"href":"https:\/\/imaginario27.com\/en\/wp-json\/wp\/v2\/project_tag?post=13251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}