Articles tagged with Svelte

A collection of articles tagged with Svelte on my blog!

An example of OpenAI API and ReadableStream with GPT 3 in SvelteKit

From this GitHub snippet:

async function OpenAITextStream(search: string) {
	const payload: OpenAITextPayload = {
		model: 'text-davinci-003',
		prompt: search,
		temperature: 0,
		max_tokens: 2048,
		frequency_penalty: 0.0,
		stream: true,
		presence_penalty: 0.0,
		n: 1
	};

	const encoder = new TextEncoder();
	const decoder = new TextDecoder();

	let counter = 0;

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

	const stream = new ReadableStream({
		async start(controller) {
			// eslint-disable-next-line @typescript-eslint/no-explicit-any
			function onParse(event: ParseEvent) {
				if (event.type === 'event') {
					const data = event.data;
					// https://beta.openai.com/docs/api-reference/completions/create#completions/create-stream
					if (data === '[DONE]') {
						controller.close();
						return;
					}
					try {
						const json = JSON.parse(data);
						const text = json.choices[0].text;

						if (counter < 2 && (text.match(/\n/) || []).length) {
							// this is a prefix character (i.e., "\n\n"), do nothing
							return;
						}
						const queue = encoder.encode(text);
						controller.enqueue(queue);
						counter++;
					} catch (e) {
						controller.error(e);
					}
				}
			}

			// stream response (SSE) from OpenAI may be fragmented into multiple chunks
			// this ensures we properly read chunks and invoke an event for each SSE event stream
			const parser = createParser(onParse);
			// https://web.dev/streams/#asynchronous-iteration
			// eslint-disable-next-line @typescript-eslint/no-explicit-any
			for await (const chunk of res.body as any) {
				parser.feed(decoder.decode(chunk));
			}
		}
	});
	return stream;
}

A quick rant on React I found on Reddit

I recently found a rant on React from this Reddit thread:

Vue should be more popular. I’m being forced to learn React because there are almost no Vue jobs on my country and I’m disliking it so far. I hate that to make it manageable I have to install more dependencies, form data management sucks, there’s no proper separation between logic, markup and style, css-in-js and CSS modules feel counter-intuitive and I don’t like them. React’s naming conventions isn’t good either. The only good thing I’ll give it would be passing props as function arguments and destructuring them.

Reminds me of A quick rant on Svelte succeeding React I found on Reddit, and how React sucks (kinda).

A quick rant on Svelte succeeding React I found on Reddit

From this Reddit comment:

Working with svelte, you do feel like it purposefully solved pain points in react:

-bloated syntax (svelte has succinct syntax and very little boilerplate in comparison)
-reactivity (svelte automatically has exhaustive dependencies and a simpler reactivity model in general)
-data fetching (svelte has an async/await paradigm instead of clunky useEffects + state)
-local state management (simple and intuitive syntax vs. useState)
-global state management (svelte stores are very lean compared to Redux)
-styling (svelte colocates markup and style)

It’s not a direct successor by any means, but in many ways it’s a spiritual successor, and generally very attractive to people who have worked deeply with React.

Reminds me of A quick rant on React I found on Reddit, and how React sucks (kinda).

)