R and JavaScript developer. Open to collaborations!
viewof chatQuestion = Inputs.text({
label: "Chat Question",
width: "100%",
value: "Can you explain to me briefly what is Python programming language?",
submit: true
})
{
if (chatStreamingResult.data) {
return html`
<style>
.chat { display:flex;flex-direction:column;font-weight:600; color:white;}
.chat .box {padding:0.5rem 1rem;margin:0.5rem;border-radius:1em;}
.left { align-self: flex-end;background: slategray;}
.right { align-self: flex-start;background: cadetblue;}
</style>
<div class="chat">
${chatStreamingResult.data.map((row) => {
return html`
<div class="box left">
${row[0]}
</div>
<div class="box right">
${row[1]}
</div>
`;
})}
</div>
</div>`;
}
}
chatStreaming.view_api()
gr = import("@gradio/client") // here we go, party time!
chatStreaming = gr.client("HuggingFaceH4/starchat-playground")
chatStreamingResult = {
// status: "pending" | "error" | "complete" | "generating";
let status = "";
let data = null;
yield { status, data };
chatStreaming
.submit(1, "", "", [[[chatQuestion, ""]], 0.8, 50, 0.95, 512, 1.2, false])
.on("status", (evt) => (status = evt.stage))
.on("data", (evt) => (data = evt.data[0]));
while (status !== "error" && status !== "complete") {
yield { status, data };
}
yield { status, data };
}
Plot.plot({
marks: [
Plot.rectY(airquality,
Plot.binX({y: "count"},
{x: histogram_var, fill: histogram_color, thresholds: bins})),
Plot.ruleY([0])
]
})
Plot.plot({
marks:[
Plot.dot(airquality, {x: "Ozone", y: "Solar.R"})
]
})
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.
