LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-09 21:07:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

prettify and rm unneeded

Browse Source
This commit is contained in:
Jesse Winton
2024-08-27 13:45:07 -04:00
parent f3eca13ee9
commit f22d30788a
23 changed files with 178 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/routes/docs/products/ai/integrations/anyscale/+page.markdoc
View File

@@ -132,16 +132,16 @@ After the `</head>` tag add a `<body>` containing the visible form:
```html
<body>
<main class="main-content">
<div class="top-cover pb-14">
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="flex gap-4 justify-center mt-4"
class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">Prompt Anyscale Demo</h1>
<code class="u-un-break-text"></code>
</div>
<p
class="body-text-1 u-normal mt-2"
class="body-text-1 u-normal u-margin-block-start-8"
style="max-width: 50rem"
>
Use this page to test your implementation with Anyscale using Mixtral 8x7B. Enter
@@ -153,8 +153,8 @@ After the `</head>` tag add a `<body>` containing the visible form:
class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', answer: '', loading: false }"
>
<div class="card flex gap-6 flex flex-col">
<div class="flex items-center gap-2">
<div class="card u-flex u-gap-24 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8">
<div
class="input-text-wrapper is-with-end-button u-width-full-line"
>
@@ -171,9 +171,9 @@ After the `</head>` tag add a `<body>` containing the visible form:
</button>
</div>
<template x-if="answer">
<div class="flex flex-col gap-3">
<div class="flex flex-col gap-3 card">
<div class="flex gap-3">
<div class="u-flex u-flex-vertical u-gap-12">
<div class="u-flex u-flex-vertical u-gap-12 card">
<div class="u-flex u-gap-12">
<h5 class="eyebrow-heading-2">Anyscale:</h5>
</div>

16
src/routes/docs/products/ai/integrations/elevenlabs/+page.markdoc
View File

@@ -135,16 +135,16 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
```html
<body>
<main class="main-content">
<div class="top-cover pb-14">
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="flex gap-4 justify-center mt-4"
class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">ElevenLabs Demo</h1>
<code class="u-un-break-text"></code>
</div>
<p
class="body-text-1 u-normal mt-2"
class="body-text-1 u-normal u-margin-block-start-8"
style="max-width: 50rem"
>
Use this page to test your implementation with ElevenLabs. Enter
@@ -156,8 +156,8 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', response: '', loading: false }"
>
<div class="card flex gap-6 flex flex-col">
<div class="flex items-center gap-2">
<div class="card u-flex u-gap-24 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8">
<div
class="input-text-wrapper is-with-end-button u-width-full-line"
>
@@ -174,9 +174,9 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
</button>
</div>
<template x-if="response">
<div class="flex flex-col gap-3">
<div class="flex flex-col gap-3 card">
<div class="flex gap-3">
<div class="u-flex u-flex-vertical u-gap-12">
<div class="u-flex u-flex-vertical u-gap-12 card">
<div class="u-flex u-gap-12">
<h5 class="eyebrow-heading-2">Output:</h5>
</div>

24
src/routes/docs/products/ai/integrations/fal-ai/+page.markdoc
View File

@@ -131,15 +131,15 @@ Within the `<html>` tag, add a `<head>` tag with the necessary meta tags, styles
And after the `</head>` tag, add our `<body>` tag with the following content:
```html
<body class="dark">
<body class="theme-dark">
<main class="main-content">
<div class="top-cover pb-14">
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div class="flex gap-4 justify-center mt-4">
<div class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16">
<h1 class="heading-level-1">fal.ai demo</h1>
<code class="u-un-break-text"></code>
</div>
<p class="body-text-1 u-normal mt-2" style="max-width: 50rem">
<p class="body-text-1 u-normal u-margin-block-start-8" style="max-width: 50rem">
Use this page to test your implementation with fal.ai. Enter
text and receive the model output as a response.
</p>
@@ -147,8 +147,8 @@ And after the `</head>` tag, add our `<body>` tag with the following content:
</div>
<div class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', result: { src: '' }, loading: false }">
<div class="card flex gap-6 flex flex-col">
<div class="flex items-center gap-2">
<div class="card u-flex u-gap-24 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8">
<div class="input-text-wrapper is-with-end-button u-width-full-line">
<input x-model="prompt" type="search" placeholder="Prompt" />
<div class="icon-search" aria-hidden="true"></div>
@@ -159,12 +159,12 @@ And after the `</head>` tag, add our `<body>` tag with the following content:
</button>
</div>
<template x-if="answer.type">
<div class="flex flex-col gap-3">
<div class="flex flex-col gap-3 card">
<div class="flex gap-3">
<div class="u-flex u-flex-vertical u-gap-12">
<div class="u-flex u-flex-vertical u-gap-12 card">
<div class="u-flex u-gap-12">
<h5 class="eyebrow-heading-2">Result:</h5>
</div>
<img class="max-w-[400px]" x-bind:src="result.src" alt="fal.ai output" />
<img class="u-max-width-400" x-bind:src="result.src" alt="fal.ai output" />
</div>
</div>
</template>
@@ -175,6 +175,7 @@ And after the `</head>` tag, add our `<body>` tag with the following content:
```
This HTML form will allow users to input a prompt and generate an image using the fal.ai API. The AlpineJS script handles the form submission and display the result.
{% /section %}
{% section #step-6 step=6 title="Handle POST Request" %}
@@ -205,7 +206,8 @@ return res.json({ ok: true, src: result.images[0].url });
With the function complete, deploy it to Appwrite by pushing the changes to your repository.
Additional models can be found in the [fal.ai model catalogue](https://fal.ai/models).
Additional models can be found in the [fal.ai model catalogue](https://fal.ai/models).
{% /section %}
{% section #step-7 step=7 title="Test the function" %}

10
src/routes/docs/products/ai/integrations/langchain/+page.markdoc
View File

@@ -115,16 +115,16 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
```html
<body>
<main class="main-content">
<div class="top-cover pb-14">
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="flex gap-4 justify-center mt-4"
class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">Pinecone Demo</h1>
<code class="u-un-break-text"></code>
</div>
<p
class="body-text-1 u-normal mt-2"
class="body-text-1 u-normal u-margin-block-start-8"
style="max-width: 50rem"
>
Use this demo to verify that the sync between Appwrite Databases and
@@ -138,7 +138,7 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
x-data="{ search: '', results: [ ] }"
x-init="$watch('search', async (value) => { results = await onSearch(value) })"
>
<div class="card flex gap-6 flex flex-col">
<div class="card u-flex u-gap-24 u-flex-vertical">
<div id="searchbox">
<div
class="input-text-wrapper is-with-end-button u-width-full-line"
@@ -147,7 +147,7 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
<div class="icon-search" aria-hidden="true"></div>
</div>
</div>
<div id="hits" class="flex flex-col gap-3">
<div id="hits" class="u-flex u-flex-vertical u-gap-12">
<template x-for="result in results">
<div class="card">
<pre x-text="JSON.stringify(result, null, '\t')"></pre>

27
src/routes/docs/products/ai/integrations/lmnt/+page.markdoc
View File

@@ -28,11 +28,11 @@ Head to the [Appwrite Console](https://cloud.appwrite.io/console), click on **Fu
{% /only_light %}
1. In the Appwrite Console's sidebar, click **Functions**.
1. Click **Create function**.
1. Under **Connect Git repository**, select your provider.
1. After connecting to GitHub, under **Quick start**, select the **Node.js** starter template.
1. In the **Variables** step, add `APPWRITE_BUCKET_ID`, `LMNT_API_KEY`. Generate your LMNT Key [here](https://app.lmnt.com/account). For the `APPWRITE_API_KEY`, tick the box to **Generate API key on completion**.
1. Follow the step-by-step wizard and create the Function.
2. Click **Create function**.
3. Under **Connect Git repository**, select your provider.
4. After connecting to GitHub, under **Quick start**, select the **Node.js** starter template.
5. In the **Variables** step, add `APPWRITE_BUCKET_ID`, `LMNT_API_KEY`. Generate your LMNT Key [here](https://app.lmnt.com/account). For the `APPWRITE_API_KEY`, tick the box to **Generate API key on completion**.
6. Follow the step-by-step wizard and create the Function.
{% /section %}
{% section #step-2 step=2 title="Add dependencies" %}
@@ -143,16 +143,16 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
```html
<body>
<main class="main-content">
<div class="top-cover pb-14">
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="flex gap-4 justify-center mt-4"
class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">LMNT Demo</h1>
<code class="u-un-break-text"></code>
</div>
<p
class="body-text-1 u-normal mt-2"
class="body-text-1 u-normal u-margin-block-start-8"
style="max-width: 50rem"
>
Use this page to test your implementation with LMNT. Enter
@@ -164,8 +164,8 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', response: '', loading: false }"
>
<div class="card flex gap-6 flex flex-col">
<div class="flex items-center gap-2">
<div class="card u-flex u-gap-24 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8">
<div
class="input-text-wrapper is-with-end-button u-width-full-line"
>
@@ -182,9 +182,9 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
</button>
</div>
<template x-if="response">
<div class="flex flex-col gap-3">
<div class="flex flex-col gap-3 card">
<div class="flex gap-3">
<div class="u-flex u-flex-vertical u-gap-12">
<div class="u-flex u-flex-vertical u-gap-12 card">
<div class="u-flex u-gap-12">
<h5 class="eyebrow-heading-2">Output:</h5>
</div>
@@ -236,6 +236,7 @@ const response = await lmnt.synthesize(req.body.text, 'lily', { format: 'mp3' })
```
This code will send the prompt to the LMNT API and return the audio as a blob. Additionally, any errors will be caught and reported for easy debugging.
{% /section %}
{% section #step-7 step=7 title="Store Audio in Appwrite Storage" %}

16
src/routes/docs/products/ai/integrations/openai/+page.markdoc
View File

@@ -132,16 +132,16 @@ After the `</head>` tag add a `<body>` containing the visible form:
```html
<body>
<main class="main-content">
<div class="top-cover pb-14">
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="flex gap-4 justify-center mt-4"
class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">Prompt ChatGPT Demo</h1>
<code class="u-un-break-text"></code>
</div>
<p
class="body-text-1 u-normal mt-2"
class="body-text-1 u-normal u-margin-block-start-8"
style="max-width: 50rem"
>
Use this page to test your implementation with OpenAI ChatGPT. Enter
@@ -153,8 +153,8 @@ After the `</head>` tag add a `<body>` containing the visible form:
class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', answer: '', loading: false }"
>
<div class="card flex gap-6 flex flex-col">
<div class="flex items-center gap-2">
<div class="card u-flex u-gap-24 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8">
<div
class="input-text-wrapper is-with-end-button u-width-full-line"
>
@@ -171,9 +171,9 @@ After the `</head>` tag add a `<body>` containing the visible form:
</button>
</div>
<template x-if="answer">
<div class="flex flex-col gap-3">
<div class="flex flex-col gap-3 card">
<div class="flex gap-3">
<div class="u-flex u-flex-vertical u-gap-12">
<div class="u-flex u-flex-vertical u-gap-12 card">
<div class="u-flex u-gap-12">
<h5 class="eyebrow-heading-2">ChatGPT:</h5>
</div>

17
src/routes/docs/products/ai/integrations/perplexity/+page.markdoc
View File

@@ -82,6 +82,7 @@ export default async ({ req, res, error }) => {
}
};
```
{% /section %}
{% section #step-5 step=5 title="Create static page" %}
@@ -134,16 +135,16 @@ And after the `</head>` tag we're going to add our `<body>` which will contain t
```html
<body>
<main class="main-content">
<div class="top-cover pb-14">
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="flex gap-4 justify-center mt-4"
class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">Perplexity AI Demo</h1>
<code class="u-un-break-text"></code>
</div>
<p
class="body-text-1 u-normal mt-2"
class="body-text-1 u-normal u-margin-block-start-8"
style="max-width: 50rem"
>
Use this page to test your implementation with Perplexity AI. Enter
@@ -155,8 +156,8 @@ And after the `</head>` tag we're going to add our `<body>` which will contain t
class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', answer: '', loading: false }"
>
<div class="card flex gap-6 flex flex-col">
<div class="flex items-center gap-2">
<div class="card u-flex u-gap-24 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8">
<div
class="input-text-wrapper is-with-end-button u-width-full-line"
>
@@ -173,9 +174,9 @@ And after the `</head>` tag we're going to add our `<body>` which will contain t
</button>
</div>
<template x-if="answer">
<div class="flex flex-col gap-3">
<div class="flex flex-col gap-3 card">
<div class="flex gap-3">
<div class="u-flex u-flex-vertical u-gap-12">
<div class="u-flex u-flex-vertical u-gap-12 card">
<div class="u-flex u-gap-12">
<h5 class="eyebrow-heading-2">Perplexity AI:</h5>
</div>

10
src/routes/docs/products/ai/integrations/pinecone/+page.markdoc
View File

@@ -116,16 +116,16 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
```html
<body>
<main class="main-content">
<div class="top-cover pb-14">
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="flex gap-4 justify-center mt-4"
class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">Pinecone Demo</h1>
<code class="u-un-break-text"></code>
</div>
<p
class="body-text-1 u-normal mt-2"
class="body-text-1 u-normal u-margin-block-start-8"
style="max-width: 50rem"
>
Use this demo to verify that the sync between Appwrite Databases and
@@ -139,7 +139,7 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
x-data="{ search: '', results: [ ] }"
x-init="$watch('search', async (value) => { results = await onSearch(value) })"
>
<div class="card flex gap-6 flex flex-col">
<div class="card u-flex u-gap-24 u-flex-vertical">
<div id="searchbox">
<div
class="input-text-wrapper is-with-end-button u-width-full-line"
@@ -148,7 +148,7 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
<div class="icon-search" aria-hidden="true"></div>
</div>
</div>
<div id="hits" class="flex flex-col gap-3">
<div id="hits" class="u-flex u-flex-vertical u-gap-12">
<template x-for="result in results">
<div class="card">
<pre x-text="JSON.stringify(result, null, '\t')"></pre>

24
src/routes/docs/products/ai/integrations/replicate/+page.markdoc
View File

@@ -131,13 +131,13 @@ And after the `</head>` tag we're going to add our `<body>` which will contain t
```html
<body>
<main class="main-content">
<div class="top-cover pb-14">
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div class="flex gap-4 justify-center mt-4">
<div class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16">
<h1 class="heading-level-1">Replicate Demo</h1>
<code class="u-un-break-text"></code>
</div>
<p class="body-text-1 u-normal mt-2" style="max-width: 50rem">
<p class="body-text-1 u-normal u-margin-block-start-8" style="max-width: 50rem">
Use this page to test your implementation with Replicate. Enter
text and receive the model output as a response.
</p>
@@ -145,8 +145,8 @@ And after the `</head>` tag we're going to add our `<body>` which will contain t
</div>
<div class="container u-margin-block-start-negative-56"
x-data="{ type: 'text', prompt: '', answer: {type: '', answer: ''}, loading: false }">
<div class="card flex gap-6 flex flex-col">
<div class="flex items-center gap-2">
<div class="card u-flex u-gap-24 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8">
<div class="input-text-wrapper is-with-end-button u-width-full-line">
<input x-model="prompt" type="search" placeholder="Prompt" />
<div class="icon-search" aria-hidden="true"></div>
@@ -166,18 +166,18 @@ And after the `</head>` tag we're going to add our `<body>` which will contain t
</button>
</div>
<template x-if="answer.type">
<div class="flex flex-col gap-3">
<div class="flex flex-col gap-3 card">
<div class="flex gap-3">
<div class="u-flex u-flex-vertical u-gap-12">
<div class="u-flex u-flex-vertical u-gap-12 card">
<div class="u-flex u-gap-12">
<h5 class="eyebrow-heading-2">Result:</h5>
</div>
<template x-if="answer.type === 'image'" class="flex gap-3">
<img class="max-w-[400px]" x-bind:src="answer.response" alt="Replicate output" />
<template x-if="answer.type === 'image'" class="u-flex u-gap-12">
<img class="u-max-width-400" x-bind:src="answer.response" alt="Replicate output" />
</template>
<template x-if="answer.type === 'audio'" class="flex gap-3">
<template x-if="answer.type === 'audio'" class="u-flex u-gap-12">
<audio x-bind:src="answer.response" controls></audio>
</template>
<template x-if="answer.type === 'text'" class="flex gap-3">
<template x-if="answer.type === 'text'" class="u-flex u-gap-12">
<p class="u-color-text-gray" x-text="answer.response"></p>
</template>
</div>

24
src/routes/docs/products/ai/integrations/tensorflow/+page.markdoc
View File

@@ -193,7 +193,9 @@ def main(context):
```
{% /section %}
{% section #step-7 step=7 title="Build the generate_text function" %}
Create the `generate_text` function in the `src/main.py` file to generate text completions using the TensorFlow model.
```python
@@ -220,8 +222,10 @@ def generate_text(prompt):
return prompt + "".join(text_generated)
```
{% /section %}
{% section #step-8 step=8 title="Create web page" %}
Create a HTML web page that the function will serve. Create a new file at `static/index.html` with some HTML boilerplate:
@@ -259,18 +263,18 @@ Create a HTML web page that the function will serve. Create a new file at `stati
<link rel="stylesheet" href="https://unpkg.com/@appwrite.io/pink" />
<link rel="stylesheet" href="https://unpkg.com/@appwrite.io/pink-icons" />
</head>
<body class="dark">
<body class="theme-dark">
<main class="main-content">
<div class="top-cover pb-14">
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="flex gap-4 justify-center mt-4"
class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">Generate with TensorFlow demo</h1>
<code class="u-un-break-text"></code>
</div>
<p
class="body-text-1 u-normal mt-2"
class="body-text-1 u-normal u-margin-block-start-8"
style="max-width: 50rem"
>
Use this page to test your implementation with TensorFlow. Enter
@@ -282,8 +286,8 @@ Create a HTML web page that the function will serve. Create a new file at `stati
class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', answer: '', loading: false }"
>
<div class="card flex gap-6 flex flex-col">
<div class="flex items-center gap-2">
<div class="card u-flex u-gap-24 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8">
<div
class="input-text-wrapper is-with-end-button u-width-full-line"
>
@@ -300,9 +304,9 @@ Create a HTML web page that the function will serve. Create a new file at `stati
</button>
</div>
<template x-if="answer">
<div class="flex flex-col gap-3">
<div class="flex flex-col gap-3 card">
<div class="flex gap-3">
<div class="u-flex u-flex-vertical u-gap-12">
<div class="u-flex u-flex-vertical u-gap-12 card">
<div class="u-flex u-gap-12">
<h5 class="eyebrow-heading-2">TensorFlow Model:</h5>
</div>
@@ -327,4 +331,4 @@ Now that the function is deployed, test it by visiting the function URL in your
This should show the UI created earlier. To test it, write a prompt and click the submit button. After a brief moment, you should see the generated text from the TensorFlow model.
{% /section %}
This concludes the tutorial on integrating TensorFlow with Appwrite. You now have a working example of a text generation model integrated with Appwrite functions!
This concludes the tutorial on integrating TensorFlow with Appwrite. You now have a working example of a text generation model integrated with Appwrite functions!

22
src/routes/docs/products/ai/integrations/togetherai/+page.markdoc
View File

@@ -134,13 +134,13 @@ And after the `</head>` tag add a `<body>` which will contain the actual form:
```html
<body>
<main class="main-content">
<div class="top-cover pb-14">
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div class="flex gap-4 justify-center mt-4">
<div class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16">
<h1 class="heading-level-1">Together AI Demo</h1>
<code class="u-un-break-text"></code>
</div>
<p class="body-text-1 u-normal mt-2" style="max-width: 50rem">
<p class="body-text-1 u-normal u-margin-block-start-8" style="max-width: 50rem">
Use this page to test your implementation with Together AI. Enter
text and receive the model output as a response.
</p>
@@ -148,8 +148,8 @@ And after the `</head>` tag add a `<body>` which will contain the actual form:
</div>
<div class="container u-margin-block-start-negative-56"
x-data="{ type: 'text', prompt: '', answer: {type: '', answer: ''}, loading: false }">
<div class="card flex gap-6 flex flex-col">
<div class="flex items-center gap-2">
<div class="card u-flex u-gap-24 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8">
<div class="input-text-wrapper is-with-end-button u-width-full-line">
<input x-model="prompt" type="search" placeholder="Prompt" />
<div class="icon-search" aria-hidden="true"></div>
@@ -168,15 +168,15 @@ And after the `</head>` tag add a `<body>` which will contain the actual form:
</button>
</div>
<template x-if="answer.type">
<div class="flex flex-col gap-3">
<div class="flex flex-col gap-3 card">
<div class="flex gap-3">
<div class="u-flex u-flex-vertical u-gap-12">
<div class="u-flex u-flex-vertical u-gap-12 card">
<div class="u-flex u-gap-12">
<h5 class="eyebrow-heading-2">Result:</h5>
</div>
<template x-if="answer.type === 'image'" class="flex gap-3">
<img class="max-w-[400px]" x-bind:src="answer.response" alt="Together output" />
<template x-if="answer.type === 'image'" class="u-flex u-gap-12">
<img class="u-max-width-400" x-bind:src="answer.response" alt="Together output" />
</template>
<template x-if="answer.type === 'text'" class="flex gap-3">
<template x-if="answer.type === 'text'" class="u-flex u-gap-12">
<p class="u-color-text-gray" x-text="answer.response"></p>
</template>
</div>

4
src/routes/docs/products/auth/mfa/+page.markdoc
View File

@@ -300,6 +300,7 @@ const response = await account.updatePhone(
'+12065550100', // phone
'password' // password
);
```
```client-flutter
Future result = account.updatePhone(
phone: '+12065550100',
@@ -344,6 +345,7 @@ Then, initiate verification for the phone number by calling `account.createPhone
{% multicode %}
```client-web
const response = await account.createPhoneVerification();
```
```client-flutter
Future result = account.createPhoneVerification();
@@ -379,6 +381,7 @@ const response = await account.updatePhoneVerification(
'<USER_ID>', // userId
'<SECRET>' // secret
);
```
```client-flutter
Future result = account.updatePhoneVerification(
userId: '<USER_ID>',
@@ -429,6 +432,7 @@ First, add a TOTP authenticator to the user's account by calling `account.addAut
const { secret, uri } = await account.createMfaAuthenticator(
'totp' // type
);
```
```client-flutter
Future result = account.createMfaAuthenticator(
type: 'totp',

7
src/routes/docs/products/functions/runtimes/+page.markdoc
View File

@@ -57,7 +57,7 @@ While still in beta, Appwrite Cloud has limited support for Cloud runtimes. As w
---
* {% icon icon="python" size="l" /%}
* [Python ML](https://hub.docker.com/r/openruntimes/python-ml)
* `python-ML-3.11`
* `python-ml-3.11`
* x86 / arm64
---
* {% icon icon="dart" size="l" /%}
@@ -161,6 +161,11 @@ While still in beta, Appwrite Cloud has limited support for Cloud runtimes. As w
`python-3.12`
* x86 / arm64 / armv7 / armv8
---
* {% icon icon="python" size="l" /%}
* [Python ML](https://hub.docker.com/r/openruntimes/python-ml)
* `python-ml-3.11`
* x86 / arm64
---
* {% icon icon="dart" size="l" /%}
* [Dart](https://hub.docker.com/r/openruntimes/dart/tags)
* `dart-2.16`

10
src/routes/docs/quick-starts/+page.svelte
View File

@@ -197,16 +197,16 @@
<main class="web-main-section" id="main">
<article class="web-article">
<header class="web-article-header">
<div class="web-article-header-start web-u-cross-start flex flex-col">
<div class="relative flex items-center">
<div class="web-article-header-start u-flex-vertical web-u-cross-start">
<div class="u-position-relative u-flex u-cross-center">
<h1 class="web-title">Quick start</h1>
</div>
</div>
<div class="web-article-header-end" />
</header>
<div class="web-article-content gap-20">
<div class="web-article-content web-u-gap-80">
{#each quickStarts as category}
<section class="flex flex-col gap-6">
<section class="u-flex-vertical u-gap-24">
<h2 class="web-eyebrow">{category.title}</h2>
<ul class="web-grid-row-4 web-grid-row-4-mobile-2">
{#each category.quickStarts as quickStart}
@@ -215,7 +215,7 @@
href={`/docs/quick-starts/${quickStart.href}`}
class="web-card is-normal"
>
<header class="flex items-baseline gap-1">
<header class="u-flex u-cross-baseline u-gap-4">
<span
class="{quickStart.icon} web-u-font-size-24"
aria-hidden="true"

6
src/routes/docs/references/[version]/[platform]/[service]/(components)/RateLimits.svelte
View File

@@ -37,9 +37,9 @@
}
</script>
<div class="web-card is-normal p-4">
<div class="flex flex-col gap-6">
<div class="flex flex-col gap-4">
<div class="web-card is-normal u-padding-16">
<div class="u-flex-vertical u-gap-24">
<div class="u-flex-vertical u-gap-16">
{#if platformType === "CLIENT"}
<p class="web-sub-body-400">
This endpoint is rate limited. You can only make a limited number of

10
src/routes/docs/references/[version]/[platform]/[service]/(components)/Request.svelte
View File

@@ -5,13 +5,13 @@
export let method: SDKMethod;
</script>
<div class="web-card is-transparent p-4">
<ul class="flex flex-col">
<div class="web-card is-transparent u-padding-16">
<ul class="u-flex-vertical">
{#each method.parameters as parameter, i}
{@const first = i === 0}
<li class:pt-4={!first}>
<li class:u-padding-block-start-16={!first}>
<article>
<header class="flex items-baseline gap-2">
<header class="u-flex u-cross-baseline u-gap-8">
<span class="web-code web-u-color-text-primary">
{parameter.name}
</span>
@@ -20,7 +20,7 @@
<div class="web-tag">required</div>
{/if}
</header>
<p class="web-sub-body-400 mt-4">
<p class="web-sub-body-400 u-margin-block-start-16">
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html parse(parameter.description)}
</p>

6
src/routes/docs/references/[version]/[platform]/[service]/(components)/Response.svelte
View File

@@ -5,20 +5,20 @@
export let method: SDKMethod;
</script>
<div class="web-card is-transparent p-4">
<div class="web-card is-transparent u-padding-16">
<ul>
{#each method.responses as response}
{#if response.models}
<li>
<article>
<header class="flex items-baseline gap-2">
<header class="u-flex u-cross-baseline u-gap-8">
<span class="web-eyebrow web-u-color-text-primary">
{response.code}
</span>
<span class="web-caption-400">application/json</span>
</header>
{#if response.models.length > 0}
<ul class="web-sub-body-400 mt-4">
<ul class="web-sub-body-400 u-margin-block-start-16">
{#each response.models as model}
<li>
<a

40
src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
View File

@@ -102,8 +102,8 @@
{/if}
</svelte:head>
<main class="contents" id="main">
<article class="web-article contents">
<main class="u-contents" id="main">
<article class="web-article u-contents">
<header class="web-article-header">
<div class="web-article-header-start">
<h1 class="web-title">{serviceName}</h1>
@@ -111,10 +111,10 @@
</div>
<div class="web-article-header-end">
<div
class="web-u-flex-vertical-mobile web-u-color-text-primary flex gap-6"
class="u-flex u-gap-24 web-u-flex-vertical-mobile web-u-color-text-primary"
>
<div class="flex items-center gap-2">
<label class="web-is-not-mobile text-sm" for="platform"
<div class="u-flex u-cross-center u-gap-8">
<label class="u-small web-is-not-mobile" for="platform"
>Platform</label
>
<Select
@@ -141,8 +141,8 @@
nativeMobile
/>
</div>
<div class="flex items-center gap-2">
<label class="web-is-not-mobile text-sm" for="version"
<div class="u-flex u-cross-center u-gap-8">
<label class="u-small web-is-not-mobile" for="version"
>Version</label
>
@@ -164,12 +164,14 @@
</header>
<div class="web-article-content" style:gap="6rem">
<section class="web-article-content-grid-6-4">
<div class="web-article-content-grid-6-4-column-1 flex flex-col gap-2">
<div
class="web-article-content-grid-6-4-column-1 u-flex-vertical u-gap-8"
>
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html parse(data.service?.description)}
</div>
<div
class="web-article-content-grid-6-4-column-2 flex flex-col justify-end gap-8"
class="web-article-content-grid-6-4-column-2 u-flex-vertical u-gap-32 u-main-end"
>
<Fence
language="text"
@@ -182,7 +184,7 @@
{#if data.methods.length === 0}
<div
class="web-article-content-grid-6-4-column-2 flex flex-col gap-8"
class="web-article-content-grid-6-4-column-2 u-flex-vertical u-gap-32"
>
<div class="web-inline-info">
<span class="icon-info" aria-hidden="true" />
@@ -197,14 +199,14 @@
{#each data.methods as method (method.id)}
<section class="web-article-content-grid-6-4">
<div
class="web-article-content-grid-6-4-column-1 flex flex-col gap-8"
class="web-article-content-grid-6-4-column-1 u-flex-vertical u-gap-32"
>
<header class="web-article-content-header">
<Heading id={method.id} level={2} inReferences
>{method.title}</Heading
>
</header>
<div class="flex flex-col gap-2">
<div class="u-flex-vertical u-gap-8">
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html parse(method.description)}
</div>
@@ -225,11 +227,11 @@
</Accordion>
</div>
<div
class="web-article-content-grid-6-4-column-2 flex flex-col gap-8"
class="web-article-content-grid-6-4-column-2 u-flex-vertical u-gap-32"
>
<div class="theme-dark contents">
<div class="u-contents theme-dark">
<div
class="sticky"
class="u-position-sticky"
style="--inset-block-start:var(--p-grid-huge-navs-secondary-sticky-position);"
>
<Fence
@@ -240,7 +242,7 @@
process
withLineNumbers={false}
/>
<div class="mt-6">
<div class="u-margin-block-start-24">
<Fence
language={platform}
content={method.demo}
@@ -269,7 +271,7 @@
</button>
<div class="web-references-menu-content">
<div
class="web-references-menu-header mt-6 flex items-center justify-between gap-4"
class="web-references-menu-header u-flex u-main-space-between u-cross-center u-gap-16 u-margin-block-start-24"
>
<h5 class="web-references-menu-title web-eyebrow">On This Page</h5>
<button
@@ -291,9 +293,9 @@
</li>
{/each}
</ul>
<div class="border-border-primary web-u-padding-block-20 border-t">
<div class="u-sep-block-start web-u-padding-block-20">
<button
class="web-link inline-flex items-center gap-2"
class="web-link u-inline-flex u-cross-center u-gap-8"
use:scrollToTop
>
<span class="web-icon-arrow-up" aria-hidden="true" />

14
src/routes/docs/tutorials/+page.svelte
View File

@@ -59,16 +59,16 @@
<main class="web-main-section" id="main">
<article class="web-article">
<header class="web-article-header">
<div class="web-article-header-start web-u-cross-start flex flex-col">
<div class="relative flex items-center">
<div class="web-article-header-start u-flex-vertical web-u-cross-start">
<div class="u-position-relative u-flex u-cross-center">
<h1 class="web-title">Tutorials</h1>
</div>
</div>
<div class="web-article-header-end" />
</header>
<div class="web-article-content gap-20">
<div class="web-article-content web-u-gap-80">
{#each data.tutorials as category}
<section class="flex flex-col gap-6">
<section class="u-flex-vertical u-gap-24">
<h2 class="web-eyebrow">{category.title}</h2>
<ul class="web-grid-row-4 web-grid-row-4-mobile-2">
{#each category.tutorials as tutorial}
@@ -80,7 +80,7 @@
aria-disabled="true"
tabindex="-1"
>
<header class="flex items-baseline gap-1">
<header class="u-flex u-cross-baseline u-gap-4">
<span
class="{getIcon(tutorial)} web-u-font-size-24"
aria-hidden="true"
@@ -93,7 +93,7 @@
</a>
{:else}
<a href={tutorial.href} class="web-card is-normal">
<header class="flex items-baseline gap-1">
<header class="u-flex u-cross-baseline u-gap-4">
<span
class="{getIcon(tutorial)} web-u-font-size-24"
aria-hidden="true"
@@ -102,7 +102,7 @@
{tutorial.framework}
</h3>
</header>
<p class="web-sub-body-400 mt-1">
<p class="web-sub-body-400 u-margin-block-start-4">
{tutorial.title}
</p>
</a>

5
src/routes/docs/tutorials/nuxt/step-2/+page.markdoc
View File

@@ -60,7 +60,6 @@ npm run dev
Nuxt relies on an opiniated directory structure to automate tasks and help organize the codebase.
To take advantage of this we need to add the following directories:
- `/components/` to keep our UI components in one place.
We will get back to it in [step 5](/docs/tutorials/nuxt/step-5)
- `/composables/`for storing files handling global states and data fetching.
@@ -107,8 +106,8 @@ Add the file `index.vue` with the following code.
<!-- pages/index.vue -->
<template>
<nav class="main-header pr-0">
<h3 class="flex-1 eyebrow-heading-1">Hello, Idea Tracker!</h3>
<nav class="main-header u-padding-inline-end-0">
<h3 class="u-stretch eyebrow-heading-1">Hello, Idea Tracker!</h3>
</nav>
</template>
```

12
src/routes/docs/tutorials/nuxt/step-4/+page.markdoc
View File

@@ -106,15 +106,15 @@ const handleRegistration = async (event) => {
</script>
<template>
<div class="max-w-[650px]" style="margin: 0 auto;">
<div class="u-max-width-650" style="margin: 0 auto;">
<section class="card u-margin-32">
<h2 class="eyebrow-heading-2">Login/Register</h2>
<AuthForm v-if="isSignUp" :handle-submit="handleRegistration" submit-type="Sign Up"></AuthForm>
<AuthForm v-else :handle-submit="handleLogin" submit-type="Log In"></AuthForm>
<button v-if="isSignUp" @click="isSignUp = false" class="mt-4">
<button v-if="isSignUp" @click="isSignUp = false" class="u-margin-block-start-16">
Already have an account? Log in
</button>
<button v-else @click="isSignUp = true" class="mt-4">
<button v-else @click="isSignUp = true" class="u-margin-block-start-16">
Don't have an account? Sign up
</button>
</section>
@@ -127,7 +127,7 @@ We will also show buttons to toggle between the two different types of forms.
# Authentication forms {% #auth-forms %}
In the previous step, we defined a `AuthForm` to handle signup and login.
In the previous step, we defined a `AuthForm` to handle signup and login.
Let's build this form now.
Create a new file `components/authForm.vue` and add the following code.
@@ -138,7 +138,7 @@ The handle submit and submit type are props passed from `pages/login.vue`
<template>
<form
class="form u-width-full-line max-w-[500px] mt-4"
class="form u-width-full-line u-max-width-500 u-margin-block-start-16"
@submit.prevent="handleSubmit"
>
<ul class="form-list">
@@ -169,7 +169,7 @@ The handle submit and submit type are props passed from `pages/login.vue`
</div>
</li>
</ul>
<ul class="buttons-list mt-4">
<ul class="buttons-list u-margin-block-start-16">
<!-- Login button -->
<li class="buttons-list-item">
<button

4
src/routes/docs/tutorials/nuxt/step-5/+page.markdoc
View File

@@ -22,8 +22,8 @@ const user = useUserSession();
<template>
<div>
<!--- Navbar -->
<nav class="main-header pr-0">
<h3 class="flex-1 eyebrow-heading-1">Idea Tracker</h3>
<nav class="main-header u-padding-inline-end-0">
<h3 class="u-stretch eyebrow-heading-1">Idea Tracker</h3>
<!-- Email and logout button if logged in user -->
<div
class="main-header-end u-margin-inline-end-16"

15
src/routes/docs/tutorials/nuxt/step-7/+page.markdoc
View File

@@ -43,7 +43,7 @@ const handleAddIdea = async (event) => {
<div>
<article class="container padding-0">
<h4 class="heading-level-4">Submit Idea</h4>
<form @submit.prevent="handleAddIdea" class="mt-4">
<form @submit.prevent="handleAddIdea" class="u-margin-block-start-16">
<ul class="form-list">
<li class="form-item">
<label class="label">Title</label>
@@ -87,7 +87,7 @@ const user = useUserSession();
</script>
<template>
<div class="max-w-[650px]" style="margin-inline: auto;">
<div class="u-max-width-650" style="margin-inline: auto;">
<!-- Idea form component for logged in users -->
<section v-if="user.current.value" class="card u-margin-32">
<IdeasForm />
@@ -108,10 +108,9 @@ article.box {
background-color: hsl(var(--color-neutral-0));
}
</style>
```
````
# Ideas list {% #ideas-list %}
Now that we can get some ideas to show, we go on to build the component for the list of ideas.
Once again, we need to take a moment to think about how this component should work.
@@ -136,13 +135,13 @@ const user = useUserSession();
<section class="u-margin-32">
<article class="card">
<h4 class="heading-level-4">Latest Ideas</h4>
<ul class="mt-2">
<ul class="u-margin-block-start-8">
<template v-if="ideas.current.value && ideas.current.value.length">
<li v-for="idea in ideas.current.value">
<div class="box">
<h5 class="heading-level-6">{{ idea.title }}</h5>
<p class="body-text-2">{{ idea.description }}</p>
<div class="absolute u-inset-inline-end-8 u-inset-block-start-8">
<div class="u-position-absolute u-inset-inline-end-8 u-inset-block-start-8">
<button class="button is-small is-text is-only-icon" aria-label="Remove item" v-if="user.current.value &&
idea.userId === user.current.value.userId
" type="button" @click="ideas.remove(idea.$id)">
@@ -168,14 +167,14 @@ This component should be visible to all users, so no conditional rendering neeed
<!-- pages/index.vue -->
<template>
<div class="max-w-[650px]" style="margin: 0 auto;">
<div class="u-max-width-650" style="margin: 0 auto;">
<!-- ... Some skipped code -->
<IdeasList />
</div>
</template>
<!-- ... Some skipped code -->
```
````
Congratulations!
You now have an ideas tracker built with Nuxt and Appwrite to use locally.