Help: ChatGPT and HTML Error

API
1

Could someone help me understand what my issue is? I have spent 2 hours going back and fourth with chatGPT but it can’t find the error. It has settled on the API Key being incorrect but I have generated multiple ones and it still does not work.

Here is the error I get in dev tools:

Failed to load resource: the server responded with a status of 400 ()
index.html:132 TypeError: Cannot read properties of undefined (reading ‘0’)
at fetchOpenAIResponse (index.html:170:30)

Here is the code:

Adventure.AI body { background-color: #1a1a1a; color: #fff; font-family: Arial, sans-serif; font-size: 16px; margin: 0; padding: 0; } 
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}

	.chat-box {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		height: calc(100vh - 250px);
		width: calc(100vw - 100px);
		padding: 20px;
		background-color: #292929;
		border-radius: 10px;
		overflow-y: scroll;
		margin-bottom: 20px;
	}

	.chat-message {
		margin-bottom: 10px;
		padding: 10px;
		background-color: #404040;
		border-radius: 10px;
		max-width: 80%;
	}

	.chat-message strong {
		color: #00bfff;
	}

	.message-form {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-bottom: 20px;
		width: calc(100vw - 100px);
		max-width: 800px;
	}

	.message-input {
		flex-grow: 1;
		padding: 10px;
		border-radius: 40px;
		border: none;
		background-color: #2d2d2d;
		color: #fff;
		margin-right: 10px;
		font-size: 16px;
		line-height: 1.5;
		overflow: hidden;
		resize: none;
		min-height: 40px;
	}

	.message-input:focus {
		outline: none;
	}

	.send-button {
		padding: 10px 20px;
		background-color: #00bfff;
		color: #fff;
		border: none;
		border-radius: 40px;
		cursor: pointer;
		transition: all 0.2s ease-in-out;
		font-size: 16px;
	}

	.send-button:hover {
		background-color: #0080ff;
	}

	.send-button:active {
		background-color: #0059b3;
	}
	
</style>

Adventure.AI

Adventure.AI: Welcome to Adventure.AI! To get started, type the name of a character you want to go on an adventure with.
Send
4

The code did not paste correctly. I removed the full length of the API key.

image
image433×905 14.3 KB

5

image
image531×894 22.5 KB

6

image
image570×863 31 KB

7

image

8

Hi
Welcome to the community.

I’ll be honest, it is pretty hard to follow your question. I am unsure what all the CSS is for, as I think your question is about the last post with the code?

Presuming it is, my JavaScript skills here could be better.
Two things stand out

  1. I think the prompt parameter should simply be prompt : "string"
  2. IIRC, I had problems with the stop parameter when it was empty. In the end, I just did not set it at all. Try removing that.
9

Welcome @anthonylonigro50

@paul.armstrong has a point. As a best practice, if you want to share code, use markdown. It’s very hard to read code from grainy images.

You’re using the request structure meant for chat completions while calling the completions endpoint.

If you want to use chat completions read the docs

10

Now I see your issue. You have the name of the model in the URL. Remove that.