The AI community building the future.
gr = import("@gradio/client")
hello = gr.client("gradio/hello_blocks")
helloResult = hello.predict("/greet", ["This is me from Observable"])
helloResult.data
sd = gr.client("stabilityai/stable-diffusion")
sd.view_api()
result = sd.predict(1, [
sd_values.prompt,
sd_values.negative_prompt,
sd_values.guidance_scale
])
html`
<div style="max-width:40rem;display:grid;gap:1rem;grid-template-columns: 1fr 1fr;">
${result.data[0].map((entry) => {
const img = new Image();
img.src = entry[0].data;
img.style.width = "100%";
return img;
})}
</div>
`
captioning = gr.client("nielsr/comparing-captioning-models")
captioningApi = captioning.view_api()
imageCaptions = captioning.predict("/predict", [
await FileAttachment("cats.jpeg").blob()
])
Inputs.table(
captioningApi.named_endpoints["/predict"].returns.map((r, i) => ({
label: r.label,
result: imageCaptions.data[i]
}))
)
eleven = gr.client("elevenlabs/tts")
eleven.view_api()
elevenResult = eleven.predict(0, [
tts_values.text,
tts_values.voice,
"eleven_multilingual_v1"
])
html`
<audio controls>
<source src="${elevenResult.data[0].data}" type="audio/x-wav">
</audio>`
chatStreaming = gr.client("ysharma/RedPajama-Chat-3B")
chatStreaming.view_api()
chatStreamingResult = {
// status: "pending" | "error" | "complete" | "generating";
let status = "";
let data = null;
yield { status, data };
chatStreaming
.submit(3, [[[chatQuestion, ""]], 0.95, 500, 1])
.on("status", (evt) => (status = evt.stage))
.on("data", (evt) => (data = evt.data[0]));
while (status !== "error" && status !== "complete") {
yield { status, data };
}
yield { status, data };
}
import { guard } from "@mootari/inputs-submit"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
