Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/** @jsxImportSource https://esm.sh/preact */
import { encode } from "https://deno.land/std@0.107.0/encoding/base64.ts";
import { render } from "npm:preact-render-to-string";
import Replicate from "npm:replicate";
const replicate = new Replicate({
auth: Deno.env.get("REPLICATE_API_TOKEN"),
});
export default async function(req: Request) {
if (req.method === "POST") {
const formData = await req.formData();
const textPrompt = formData.get("textPrompt");
const formattedPrompt =
`Take the description that follows and imagine it vividly as a masterful painting, describing character, action, setting, composition, lighting, and mood. It should still resemble a hand drawing, closer to a scribble than a realistic painting. The dr
"""
${textPrompt}
"""`;
// Run text model
const input = {
prompt: formattedPrompt,
temperature: 0.75,
max_new_tokens: 500,
min_new_tokens: -1,
};
let streamedText = "";
for await (const event of replicate.stream("mistralai/mixtral-8x7b-instruct-v0.1", { input })) {
streamedText += event.toString();
}
console.log(streamedText);
// Run generative model
const generatedImage = await replicate.run(
"rapfl/sdxl-zottify:caf6f0e13ef741de9353b0a06146797a4a55fbff3f5f4013e7fe755756a346e1",
{
input: {
prompt: streamedText + " A drawing in the style of zottify.",
num_inference_steps: 20,
guidance_scale: 5,
width: 1024,
height: 576,
},
},
);
const result = generatedImage[0];
// Sending a card with the image in it
return new Response(
render(
<div class="terminal-card">
<header></header>
<figure>
<img src={result} alt={textPrompt} />
<figcaption>{textPrompt?.toString()}</figcaption>
</figure>
</div>,
),
{
headers: { "Content-Type": "text/html; charset=utf-8" },
},
);
}
// If it's not a POST request we always send the full page
return new Response(
render(
<html>
<head>
<title>ZOTTIFY</title>
<script src="https://unpkg.com/htmx.org@1.9.9"></script>
<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.7.4/dist/terminal.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
{`.loading-indicator { display: none; }
.htmx-request.loading-indicator { display: block; }`}
</style>
</head>
<body class="container">
<h1>ZOTTIFY</h1>
<h6>an AI generated wrapper design in the style of Zotter Chocolate</h6>
<form
hx-target="#indicator"
hx-post="/"
enctype="multipart/form-data"
hx-swap="afterend"
hx-indicator="#indicator"
>
<fieldset>
<legend>zottify your life</legend>
<div class="field">
<label for="textPrompt">what's the choc flavor?</label>
<input id="textPrompt" name="textPrompt" type="text" />
</div>
<hr />
<button type="submit" class="btn btn-block btn-ghost">
<span class="terminal-prompt">choc it up!</span>
</button>