Versions

  • v31

    8/21/2024
    Open: Version
    Changes from v30 to v31
    +23
    -9
    ⦚ 32 unchanged lines ⦚
    try {
    const response = await fetch(`/run?operation=${operation}`, {
    method: 'POST',
    headers: {
    'Content-Type': 'application/json',
    },
    body: JSON.stringify({ apiKey }),
    ⦚ 10 unchanged lines ⦚
    <div>
    <h1>Anthropic Caching JS Demo</h1>
    <p>This val is attempting to clone <a href="https://github.com/anthropics/anthropic-cookbook/blob/7786b9f39db8ba65202792f564c59697a5222531/misc/prompt_caching.ipynb#L402">this python notebook</a>,
    but so far I haven't been able to get verified cache writes and reads. There's a chance I misunderstand how to cache things or <a href="https://github.com/anthropics/anthropic-cookbook/issues/86">I found a bug</a> in that original notebook. Help is appreciated! Email steve@val.town or DM me on Twitter.</p>
    <p>
    <a href={import.meta.url.replace("esm.town", "val.town")}>View Source on Val Town</a>
    ⦚ 23 unchanged lines ⦚
    <h2>Multi-turn Conversation Output:</h2>
    <pre>{loading.multiTurn ? "Loading..." : outputs.multiTurn}</pre>

    </div>
    );
    ⦚ 26 unchanged lines ⦚
    result = await runNonCachedCall(apiKey);
    } else if (operation === "cachedCall") {
    result = await runCachedCall(apiKey);
    } else if (operation === "multiTurn") {
    ⦚ 76 unchanged lines ⦚
    const startTime = Date.now();

    const response = await client.messages.create({
    model: MODEL_NAME,
    max_tokens: 300,
    ⦚ 32 unchanged lines ⦚
    try {
    const response = await fetch(`/run?operation=${operation}`, {
    method: "POST",
    headers: {
    "Content-Type": "application/json",
    },
    body: JSON.stringify({ apiKey }),
    ⦚ 10 unchanged lines ⦚
    <div>
    <h1>Anthropic Caching JS Demo</h1>
    <p>
    This val is attempting to clone{" "}
    <a href="https://github.com/anthropics/anthropic-cookbook/blob/7786b9f39db8ba65202792f564c59697a5222531/misc/prompt_caching.ipynb#L402">
    this python notebook
    </a>, but so far I haven't been able to get verified cache writes and reads. There's a chance I misunderstand
    how to cache things or <a href="https://github.com/anthropics/anthropic-cookbook/issues/86">I found a bug</a>
    {" "}
    in that original notebook. Help is appreciated! Email steve@val.town or DM me on Twitter.
    </p>
    <p>
    <a href={import.meta.url.replace("esm.town", "val.town")}>View Source on Val Town</a>
    ⦚ 23 unchanged lines ⦚
    <h2>Multi-turn Conversation Output:</h2>
    <pre>{loading.multiTurn ? "Loading..." : outputs.multiTurn}</pre>
    </div>
    );
    ⦚ 26 unchanged lines ⦚
    result = await runNonCachedCall(apiKey);
    } else if (operation === "cachedCall") {
    await runCachedCall(apiKey);
    result = await runCachedCall(apiKey);
    } else if (operation === "multiTurn") {
  • v30

    8/21/2024
    Open: Version
    Changes from v29 to v30
    +1
    -1
    ⦚ 50 unchanged lines ⦚
    <h1>Anthropic Caching JS Demo</h1>
    <p>This val is attempting to clone <a href="https://github.com/anthropics/anthropic-cookbook/blob/7786b9f39db8ba65202792f564c59697a5222531/misc/prompt_caching.ipynb#L402">this python notebook</a>,
    but so far I haven't been able to get verified cache writes and reads. Help is appreciated! Email steve@val.town or DM me on Twitter.</p>
    <p>
    <a href={import.meta.url.replace("esm.town", "val.town")}>View Source on Val Town</a>
    ⦚ 258 unchanged lines ⦚
    ⦚ 50 unchanged lines ⦚
    <h1>Anthropic Caching JS Demo</h1>
    <p>This val is attempting to clone <a href="https://github.com/anthropics/anthropic-cookbook/blob/7786b9f39db8ba65202792f564c59697a5222531/misc/prompt_caching.ipynb#L402">this python notebook</a>,
    but so far I haven't been able to get verified cache writes and reads. There's a chance I misunderstand how to cache things or <a href="https://github.com/anthropics/anthropic-cookbook/issues/86">I found a bug</a> in that original notebook. Help is appreciated! Email steve@val.town or DM me on Twitter.</p>
    <p>
    <a href={import.meta.url.replace("esm.town", "val.town")}>View Source on Val Town</a>
    ⦚ 258 unchanged lines ⦚
  • v29

    8/21/2024
    Open: Version
    Changes from v28 to v29
    +1
    -1
    ⦚ 49 unchanged lines ⦚
    <div>
    <h1>Anthropic Caching JS Demo</h1>
    <p>This val is attempting to clone <a target="_blank" href="https://github.com/anthropics/anthropic-cookbook/blob/7786b9f39db8ba65202792f564c59697a5222531/misc/prompt_caching.ipynb#L402">this python notebook</a>,
    but so far I haven't been able to get verified cache writes and reads. Help is appreciated! Email steve@val.town or DM me on Twitter.</p>
    <p>
    ⦚ 259 unchanged lines ⦚
    ⦚ 49 unchanged lines ⦚
    <div>
    <h1>Anthropic Caching JS Demo</h1>
    <p>This val is attempting to clone <a href="https://github.com/anthropics/anthropic-cookbook/blob/7786b9f39db8ba65202792f564c59697a5222531/misc/prompt_caching.ipynb#L402">this python notebook</a>,
    but so far I haven't been able to get verified cache writes and reads. Help is appreciated! Email steve@val.town or DM me on Twitter.</p>
    <p>
    ⦚ 259 unchanged lines ⦚
  • v28

    8/21/2024
    Open: Version
    Changes from v27 to v28
    +1
    -1
    ⦚ 49 unchanged lines ⦚
    <div>
    <h1>Anthropic Caching JS Demo</h1>
    <p>This val is attempting to clone <a href="https://github.com/anthropics/anthropic-cookbook/blob/7786b9f39db8ba65202792f564c59697a5222531/misc/prompt_caching.ipynb#L402">this python notebook</a>,
    but so far I haven't been able to get verified cache writes and reads. Help is appreciated! Email steve@val.town or DM me on Twitter.</p>
    <p>
    ⦚ 259 unchanged lines ⦚
    ⦚ 49 unchanged lines ⦚
    <div>
    <h1>Anthropic Caching JS Demo</h1>
    <p>This val is attempting to clone <a target="_blank" href="https://github.com/anthropics/anthropic-cookbook/blob/7786b9f39db8ba65202792f564c59697a5222531/misc/prompt_caching.ipynb#L402">this python notebook</a>,
    but so far I haven't been able to get verified cache writes and reads. Help is appreciated! Email steve@val.town or DM me on Twitter.</p>
    <p>
    ⦚ 259 unchanged lines ⦚
  • v27

    8/21/2024
    Open: Version
    Changes from v26 to v27
    +2
    -0
    ⦚ 49 unchanged lines ⦚
    <div>
    <h1>Anthropic Caching JS Demo</h1>
    <p>
    <a href={import.meta.url.replace("esm.town", "val.town")}>View Source on Val Town</a>
    </p>
    ⦚ 257 unchanged lines ⦚
    ⦚ 49 unchanged lines ⦚
    <div>
    <h1>Anthropic Caching JS Demo</h1>
    <p>This val is attempting to clone <a href="https://github.com/anthropics/anthropic-cookbook/blob/7786b9f39db8ba65202792f564c59697a5222531/misc/prompt_caching.ipynb#L402">this python notebook</a>,
    but so far I haven't been able to get verified cache writes and reads. Help is appreciated! Email steve@val.town or DM me on Twitter.</p>
    <p>
    <a href={import.meta.url.replace("esm.town", "val.town")}>View Source on Val Town</a>
    </p>
    ⦚ 257 unchanged lines ⦚
  • v26

    8/21/2024
    Open: Version
    Changes from v25 to v26
    +4
    -3
    ⦚ 49 unchanged lines ⦚
    <div>
    <h1>Anthropic Caching JS Demo</h1>
    <div>
    <input
    type="password"
    ⦚ 19 unchanged lines ⦚
    <h2>Multi-turn Conversation Output:</h2>
    <pre>{loading.multiTurn ? "Loading..." : outputs.multiTurn}</pre>
    <p>
    <a href={import.meta.url.replace("esm.town", "val.town")}>View Source</a>
    </p>
    </div>
    );
    ⦚ 230 unchanged lines ⦚
    ⦚ 49 unchanged lines ⦚
    <div>
    <h1>Anthropic Caching JS Demo</h1>
    <p>
    <a href={import.meta.url.replace("esm.town", "val.town")}>View Source on Val Town</a>
    </p>
    <div>
    <input
    type="password"
    ⦚ 19 unchanged lines ⦚
    <h2>Multi-turn Conversation Output:</h2>
    <pre>{loading.multiTurn ? "Loading..." : outputs.multiTurn}</pre>

    </div>
    );
    ⦚ 230 unchanged lines ⦚
  • v25

    8/21/2024
    Open: Version
    Changes from v24 to v25
    +2
    -2
    ⦚ 48 unchanged lines ⦚
    return (
    <div>
    <h1>Interactive AI Demo</h1>
    <div>
    <input
    ⦚ 67 unchanged lines ⦚
    <html>
    <head>
    <title>Interactive AI Demo</title>
    <style>${css}</style>
    </head>
    ⦚ 185 unchanged lines ⦚
    ⦚ 48 unchanged lines ⦚
    return (
    <div>
    <h1>Anthropic Caching JS Demo</h1>
    <div>
    <input
    ⦚ 67 unchanged lines ⦚
    <html>
    <head>
    <title>Anthropic Caching JS Demo</title>
    <style>${css}</style>
    </head>
    ⦚ 185 unchanged lines ⦚
  • v24

    8/21/2024
    Open: Version
    Changes from v23 to v24
    +52
    -31
    /**
    * This val creates an interactive webpage that demonstrates the functionality of the Python notebook.
    * It uses a React frontend with buttons to trigger different operations, and a backend to handle API calls.
    * Each operation is independent and doesn't rely on a "setup" step.
    */

    ⦚ 3 unchanged lines ⦚

    function App() {
    const [outputs, setOutputs] = useState({
    fetchContent: "",
    ⦚ 10 unchanged lines ⦚

    const runOperation = async (operation: string) => {
    setLoading(prev => ({ ...prev, [operation]: true }));
    try {
    const response = await fetch(`/run?operation=${operation}`);
    const result = await response.text();
    setOutputs(prev => ({ ...prev, [operation]: result }));
    ⦚ 7 unchanged lines ⦚
    <div>
    <h1>Interactive AI Demo</h1>
    <div>
    <button onClick={() => runOperation("fetchContent")} disabled={loading.fetchContent}>Fetch Content</button>
    ⦚ 32 unchanged lines ⦚
    if (url.pathname === "/run") {
    const operation = url.searchParams.get("operation");
    let result = "";

    if (operation === "fetchContent") {
    result = await fetchContent();
    } else if (operation === "nonCachedCall") {
    await runNonCachedCall();
    /**
    * This val creates an interactive webpage that demonstrates the functionality of the Anthropic API.
    * It uses a React frontend with an input for the API key and buttons to trigger different operations.
    * The Anthropic API key is stored in the frontend state and sent with each API request.
    */

    ⦚ 3 unchanged lines ⦚

    function App() {
    const [apiKey, setApiKey] = useState("");
    const [outputs, setOutputs] = useState({
    fetchContent: "",
    ⦚ 10 unchanged lines ⦚

    const runOperation = async (operation: string) => {
    if (!apiKey) {
    alert("Please enter your Anthropic API key first.");
    return;
    }

    setLoading(prev => ({ ...prev, [operation]: true }));
    try {
    const response = await fetch(`/run?operation=${operation}`, {
    method: 'POST',
    headers: {
    'Content-Type': 'application/json',
    },
    body: JSON.stringify({ apiKey }),
    });
    const result = await response.text();
    setOutputs(prev => ({ ...prev, [operation]: result }));
    ⦚ 7 unchanged lines ⦚
    <div>
  • v23

    8/21/2024
    Open: Version
    +289
    -0

    /**
    * This val creates an interactive webpage that demonstrates the functionality of the Python notebook.
    * It uses a React frontend with buttons to trigger different operations, and a backend to handle API calls.
    * Each operation is independent and doesn't rely on a "setup" step.
    */

    /** @jsxImportSource https://esm.sh/react */
    import React, { useState } from "https://esm.sh/react";
    import { createRoot } from "https://esm.sh/react-dom/client";

    function App() {
    const [outputs, setOutputs] = useState({
    fetchContent: "",
    nonCachedCall: "",
    cachedCall: "",
    multiTurn: "",
    });
    const [loading, setLoading] = useState({
    fetchContent: false,
    nonCachedCall: false,
    cachedCall: false,
    multiTurn: false,
    });

    const runOperation = async (operation: string) => {
    setLoading(prev => ({ ...prev, [operation]: true }));
    try {
    const response = await fetch(`/run?operation=${operation}`);
    const result = await response.text();
    setOutputs(prev => ({ ...prev, [operation]: result }));
    } catch (error) {
    setOutputs(prev => ({ ...prev, [operation]: `Error: ${error.message}` }));
    }
    setLoading(prev => ({ ...prev, [operation]: false }));
    };

stevekrouse-anthropiccaching.web.val.run
Updated: October 18, 2024