Skip to content

Commit

Permalink
fix: fal.ai consistency
Browse files Browse the repository at this point in the history
  • Loading branch information
@loks0n
loks0n committed Apr 29, 2024
1 parent 7e5d73b commit 24b3a2a
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 62 deletions.
1 change: 1 addition & 0 deletions .github/workflows/markdown-table-workflow/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ const overrideWords = {
elevenlabs: "ElevenLabs",
langchain: "LangChain",
huggingface: "Hugging Face",
fal: "fal.ai",
};

const folderDenylist = [".github", ".git"];
Expand Down
9 changes: 9 additions & 0 deletions node/generate-with-fal/env.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
declare global {
namespace NodeJS {
interface ProcessEnv {
FAL_API_KEY: string;
}
}
}

export {};
138 changes: 76 additions & 62 deletions node/generate-with-fal/static/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,78 +1,92 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>fal.ai Demo</title>

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FAL Demo</title>
<script>
async function onSubmit(prompt, type) {
const response = await fetch('/', {
method: 'POST',
body: JSON.stringify({ prompt, type }),
headers: {
'Content-Type': 'application/json',
},
});

<script>
async function onSubmit(prompt, type) {
const response = await fetch('/', {
method: 'POST',
body: JSON.stringify({ prompt, type }),
headers: {
'Content-Type': 'application/json',
},
});
const json = await response.json();

const json = await response.json();
if (!json.ok || json.error) {
alert(json.error);
}

if (!json.ok || json.error) {
alert(json.error);
return json;
}
</script>

return json;
}
</script>
<script src="//unpkg.com/alpinejs" defer></script>

<script src="//unpkg.com/alpinejs" defer></script>
<link rel="stylesheet" href="https://unpkg.com/@appwrite.io/pink" />
<link rel="stylesheet" href="https://unpkg.com/@appwrite.io/pink-icons" />
</head>

<link rel="stylesheet" href="https://unpkg.com/@appwrite.io/pink" />
<link rel="stylesheet" href="https://unpkg.com/@appwrite.io/pink-icons" />
</head>

<body>
<main class="main-content">
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16">
<h1 class="heading-level-1">FAL Demo</h1>
<code class="u-un-break-text"></code>
<body>
<main class="main-content">
<div class="top-cover u-padding-block-end-56">
<div class="container">
<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 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>
</div>
<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. Enter
text and receive the model output as a response.
</p>
</div>
</div>
<div class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', result: { src: '' }, loading: false }">
<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>
<div
class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', result: { src: '' }, loading: false }"
>
<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>
</div>
<button
class="button"
x-bind:disabled="loading"
x-on:click="async () => { loading = true; result = { src: '' }; try { result = await onSubmit(prompt) } catch(err) { console.error(err); } finally { loading = false; } }"
>
<span class="text">Generate</span>
</button>
</div>
<button class="button" x-bind:disabled="loading"
x-on:click="async () => { loading = true; result = { src: '' }; try { result = await onSubmit(prompt) } catch(err) { console.error(err); } finally { loading = false; } }">
<span class="text">Generate</span>
</button>
</div>
<template x-if="answer.type">
<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>
<template x-if="answer.type">
<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="u-max-width-400"
x-bind:src="result.src"
alt="fal.ai output"
/>
</div>
<img class="u-max-width-400" x-bind:src="result.src" alt="FAL output" />
</div>
</div>
</template>
</template>
</div>
</div>
</div>
</main>
</body>

</html>
</main>
</body>
</html>

0 comments on commit 24b3a2a

Please sign in to comment.