I get the following issue when trying to generate code from a wireframe: <p dir="a

From what I quickly read on the <a href="https://platform.openai.com/docs/guides/visio

<a target="_blank" rel="noopener noreferrer" href="https://private-user-images.githubu

As <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

Wireframe to code must be upgraded to newer gpt model (gpt-4-vision-preview depricated) about excalidraw HOT 5 OPEN

maekoos commented on July 4, 2024 1

Wireframe to code must be upgraded to newer gpt model (gpt-4-vision-preview depricated)

from excalidraw.

Comments (5)

dwelle commented on July 4, 2024 4

We're actually in the process of moving away from bring-your-own-token workflow as it was too complicated and introduced it early only due to extremely low API limits on OpenAI's part. Further, it's limiting us to only use a specific service if we wanted to do something more dynamic.

We'll be updating this soon.

from excalidraw.

maekoos commented on July 4, 2024

From what I quickly read on the openAI Vision API website the api seems compatible with what is currently implemented:

excalidraw/packages/excalidraw/data/magic.ts

Lines 50 to 104 in 4dc4590

 const body: OpenAIInput.ChatCompletionCreateParamsBase = { 

 model: "gpt-4-vision-preview", 

 // 4096 are max output tokens allowed for `gpt-4-vision-preview` currently 

 max_tokens: 4096, 

 temperature: 0.1, 

 messages: [ 

 { 

 role: "system", 

 content: SYSTEM_PROMPT, 

 }, 

 { 

 role: "user", 

 content: [ 

 { 

 type: "image_url", 

 image_url: { 

 url: image, 

 detail: "high", 

 }, 

 }, 

 { 

 type: "text", 

 text: `Above is the reference wireframe. Please make a new website based on these and return just the HTML file. Also, please make it for the ${theme} theme. What follows are the wireframe's text annotations (if any)...`, 

 }, 

 { 

 type: "text", 

 text, 

 }, 

 ], 

 }, 

 ], 

 }; 

 let result: 

 | ({ ok: true } & OpenAIOutput.ChatCompletion) 

 | ({ ok: false } & OpenAIOutput.APIError); 

 const resp = await fetch("https://api.openai.com/v1/chat/completions", { 

 method: "POST", 

 headers: { 

 "Content-Type": "application/json", 

 Authorization: `Bearer ${apiKey}`, 

 }, 

 body: JSON.stringify(body), 

 }); 

 if (resp.ok) { 

 const json: OpenAIOutput.ChatCompletion = await resp.json(); 

 result = { ...json, ok: true }; 

 } else { 

 const json: OpenAIOutput.APIError = await resp.json(); 

 result = { ...json, ok: false }; 

 } 

 return result;

Seems like all that is needed is to change the model to "gpt-4o"?

from excalidraw.

maekoos commented on July 4, 2024

I got it working by only changing the model to "gpt-4o".

However, I found another issue in the process. Wireframes inside a frame will just generate a generic website:

A totally unrelated issue but also kind of awkward... :/

from excalidraw.

yunuuuk1 commented on July 4, 2024

I'm using the wireframe to code feature in Excalidraw, but I'm getting this error message:
Error!
The model gpt-4-vision-preview has been deprecated, learn more here: https://platform.openai.com/docs/deprecations
I also tried changing the default vision model to gpt-4o, but I'm still getting the same error. Can help me with this issue?"

from excalidraw.

maekoos commented on July 4, 2024

As @dwelle said, they will be updating this soon.

If you need it right away and have a ChatGPT 4o token (you need to pay $5 on platform.openai.com I think) then you could try this version (the one generated from my pull request):

https://excalidraw-git-fork-maekoos-fix-8147-excalidraw.vercel.app/

from excalidraw.

Wireframe to code must be upgraded to newer gpt model (gpt-4-vision-preview depricated) about excalidraw HOT 5 OPEN

Comments (5)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	const body: OpenAIInput.ChatCompletionCreateParamsBase = {
	model: "gpt-4-vision-preview",
	// 4096 are max output tokens allowed for `gpt-4-vision-preview` currently
	max_tokens: 4096,
	temperature: 0.1,
	messages: [
	{
	role: "system",
	content: SYSTEM_PROMPT,
	},
	{
	role: "user",
	content: [
	{
	type: "image_url",
	image_url: {
	url: image,
	detail: "high",
	},
	},
	{
	type: "text",
	text: `Above is the reference wireframe. Please make a new website based on these and return just the HTML file. Also, please make it for the ${theme} theme. What follows are the wireframe's text annotations (if any)...`,
	},
	{
	type: "text",
	text,
	},
	],
	},
	],
	};

	let result:
	\| ({ ok: true } & OpenAIOutput.ChatCompletion)
	\| ({ ok: false } & OpenAIOutput.APIError);

	const resp = await fetch("https://api.openai.com/v1/chat/completions", {
	method: "POST",
	headers: {
	"Content-Type": "application/json",
	Authorization: `Bearer ${apiKey}`,
	},
	body: JSON.stringify(body),
	});

	if (resp.ok) {
	const json: OpenAIOutput.ChatCompletion = await resp.json();
	result = { ...json, ok: true };
	} else {
	const json: OpenAIOutput.APIError = await resp.json();
	result = { ...json, ok: false };
	}

	return result;