# Persist Chat History for Gradio API

**URL:** <https://discuss.huggingface.co/t/persist-chat-history-for-gradio-api/143677>\
**Category:** Spaces\
**Created:** [March 2, 2025, 3:36pm UTC](https://discuss.huggingface.co/t/persist-chat-history-for-gradio-api/143677 "2025-03-02T15:36:02Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![xetaverse](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/xetaverse/32/42331_2.png) [@xetaverse](https://discuss.huggingface.co/u/xetaverse)\
**Post date:** [March 2, 2025, 3:36pm UTC](https://discuss.huggingface.co/t/persist-chat-history-for-gradio-api/143677/1 "2025-03-02T15:36:02Z")

</div>

I am interacting with the Gradio API using a chatbot, but I want to continue the chat on another device like chatgpt history where it continues the chatting. How can I achieve this?

```auto

  const [chatHistory, setChatHistory] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [input, setInput] = useState("");
  const [previewMessage, setPreviewMessage] = useState("");
  const [clientt, setClientt] = useState(null);

  useEffect(() => {
    (async () => {
      const cli = await Client.connect("Qwen/Qwen2.5-VL-72B-Instruct");
      setClientt(cli);
    })();
  }, []);

  useEffect(() => {
    console.log('History:', JSON.stringify(chatHistory));
  }, [chatHistory])
  const sendMessage = async () => {
    if (!input.trim()) return;

    const newMessage = input;
    setInput('');
    setIsLoading(true);

    try {
      const a = await clientt.predict(
        "/add_text", {
        history: chatHistory,
        text: newMessage,
      });

      await clientt.predict(
        "/reset_user_input",
      );
      const data = await clientt.predict(
        "/predict", {
        _chatbot: [[newMessage, "null"]],
      });

      // console.log(JSON.stringify(data.data[0][0]));

      let botResponse = data.data[0][0] || "I couldn't understand that.";
      setChatHistory(prev => [...prev, botResponse]);
      // console.log('resp: ', JSON.stringify(data.data));
    } catch (error) {
      console.error("Error communicating with the model:", error);
      setChatHistory((prev) => [
        ...prev,
        [newMessage, "Sorry, there was an error processing your request."],
      ]);
    } finally {
      setIsLoading(false);
    }
  };

```

\*clientt is not typo

---

<div class="post-metadata">

**Author:** ![John6666](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/john6666/32/27664_2.png) [@John6666](https://discuss.huggingface.co/u/John6666)\
**Post date:** [March 2, 2025, 7:46pm UTC](https://discuss.huggingface.co/t/persist-chat-history-for-gradio-api/143677/2 "2025-03-02T19:46:08Z")

</div>

It’s a little old, but it’s similar to this.

> [@Implementing chatbot history like chatgpt on gradio gr.chatinterface()](https://discuss.huggingface.co/t/implementing-chatbot-history-like-chatgpt-on-gradio-gr-chatinterface/52186):
>
> Hello there! How can I implement chatbot history like chatgpt where the chatbot remembers past prompts in gradio with the new gr.chatinterface().

---

<div class="post-metadata">

**Author:** ![xetaverse](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/xetaverse/32/42331_2.png) [@xetaverse](https://discuss.huggingface.co/u/xetaverse)\
**Post date:** [March 4, 2025, 3:57pm UTC](https://discuss.huggingface.co/t/persist-chat-history-for-gradio-api/143677/3 "2025-03-04T15:57:38Z")

</div>

No, thats not the solution. It just stores the chat but i want to make model continue chat on other device on previous topic. How can i achieve that?

---

<div class="post-metadata">

**Author:** ![John6666](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/john6666/32/27664_2.png) [@John6666](https://discuss.huggingface.co/u/John6666)\
**Post date:** [March 4, 2025, 5:05pm UTC](https://discuss.huggingface.co/t/persist-chat-history-for-gradio-api/143677/4 "2025-03-04T17:05:27Z")

</div>

If you want to continue on other devices, there are several methods, but if you want to target multiple users, you will need to create a simple login system and database.

If you only want to target a single user, there is a way to store it in a global variable… but this is not clean, so we do not recommend it.

---

<div class="post-metadata">

**Author:** ![xetaverse](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/xetaverse/32/42331_2.png) [@xetaverse](https://discuss.huggingface.co/u/xetaverse)\
**Post date:** [March 5, 2025, 1:41pm UTC](https://discuss.huggingface.co/t/persist-chat-history-for-gradio-api/143677/5 "2025-03-05T13:41:53Z")

</div>

I will think for more users later, can you help me for one user??  
How qwen 2.5 72B VL model continue chat on same topic on other device?  
I tried:

```auto
      const cli = await Client.connect("Qwen/Qwen2.5-VL-72B-Instruct");
      localStorage.setItem("key", JSON.stringify(cli));
      const storedData = JSON.parse(localStorage.getItem("key"));
      console.log('sdata', storedData);
      setClientt(storedData);

```

but not works.

---

<div class="post-metadata">

**Author:** ![John6666](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/john6666/32/27664_2.png) [@John6666](https://discuss.huggingface.co/u/John6666)\
**Post date:** [March 5, 2025, 3:24pm UTC](https://discuss.huggingface.co/t/persist-chat-history-for-gradio-api/143677/6 "2025-03-05T15:24:46Z")

</div>

If you want to do it using the existing space, there are almost no options…

However, I think there is a way to record all the history of your conversations with the chatbot in history, and then pass both message and history together.

> **[Qwen2.5 VL 72B Instruct - a Hugging Face Space by Qwen](https://huggingface.co/spaces/Qwen/Qwen2.5-VL-72B-Instruct)**
>
> Discover amazing ML apps made by the community

There are several data structures for history, but basically you should prepare a structure like the one below. (In the case of Python. There should be something similar in JS as well.)

```py
history = [
    {"role": "user", "content": "Hello."},
    {"role": "assistant", "content": "Hello."},
    {"role": "user", "content": "How are you?"},
    {"role": "assistant", "content": "Fine."},
]

```

> **[Gradio Docs](https://www.gradio.app/docs/gradio/chatbot)**
>
> Gradio docs for using

---

<div class="post-metadata">

**Author:** ![xetaverse](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/xetaverse/32/42331_2.png) [@xetaverse](https://discuss.huggingface.co/u/xetaverse)\
**Post date:** [March 6, 2025, 8:19am UTC](https://discuss.huggingface.co/t/persist-chat-history-for-gradio-api/143677/7 "2025-03-06T08:19:31Z")

</div>

Yes, but can’t find for JS

---

<div class="post-metadata">

**Author:** ![xetaverse](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/xetaverse/32/42331_2.png) [@xetaverse](https://discuss.huggingface.co/u/xetaverse)\
**Post date:** [March 6, 2025, 8:24am UTC](https://discuss.huggingface.co/t/persist-chat-history-for-gradio-api/143677/8 "2025-03-06T08:24:27Z")

</div>

How can I use Transformers.js for VL models?

---

<div class="post-metadata">

**Author:** ![John6666](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/john6666/32/27664_2.png) [@John6666](https://discuss.huggingface.co/u/John6666)\
**Post date:** [March 6, 2025, 8:34am UTC](https://discuss.huggingface.co/t/persist-chat-history-for-gradio-api/143677/9 "2025-03-06T08:34:47Z")

</div>

Maybe this.

> **[pipelines](https://huggingface.co/docs/transformers.js/api/pipelines#module_pipelines.DocumentQuestionAnsweringPipeline)**
>
> We’re on a journey to advance and democratize artificial intelligence through open source and open science.

> Yes, but can’t find for JS

In the case of JavaScript, it seems that history is a two-dimensional list.

```js
`import { Client } from "@gradio/client";

const client = await Client.connect("Qwen/Qwen2.5-72B-Instruct");
const result = await client.predict("/model_chat", { 		
		query: "Hello!!", 		
		history: [["Hello!",None]], 		
		system: "Hello!!", 
});

console.log(result.data);`

```

---

<div class="post-metadata">

**Author:** ![xetaverse](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/xetaverse/32/42331_2.png) [@xetaverse](https://discuss.huggingface.co/u/xetaverse)\
**Post date:** [March 6, 2025, 8:36am UTC](https://discuss.huggingface.co/t/persist-chat-history-for-gradio-api/143677/10 "2025-03-06T08:36:09Z")

</div>

Doesn’t work 😔

---

<div class="post-metadata">

**Author:** ![xetaverse](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/xetaverse/32/42331_2.png) [@xetaverse](https://discuss.huggingface.co/u/xetaverse)\
**Post date:** [March 6, 2025, 2:43pm UTC](https://discuss.huggingface.co/t/persist-chat-history-for-gradio-api/143677/11 "2025-03-06T14:43:40Z")

</div>

It has these options:  
const cli = await Client.connect(“Qwen/Qwen2.5-VL-72B-Instruct”, {  
// Session continuity  
eventstream:, // Enable event stream  
events:,  
auth:,  
hf\_token:,  
headers:,  
status\_callback:,  
with\_null\_state:,  
});

anything useful?

---

<div class="post-metadata">

**Author:** ![John6666](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/john6666/32/27664_2.png) [@John6666](https://discuss.huggingface.co/u/John6666)\
**Post date:** [March 6, 2025, 2:56pm UTC](https://discuss.huggingface.co/t/persist-chat-history-for-gradio-api/143677/12 "2025-03-06T14:56:46Z")

</div>

I think it’s for a different purpose. I wonder if what you’re aiming for is similar to this.

> <https://github.com/gradio-app/gradio/issues/3106>
>
> Right now, the session state is either global shared between users or local with…in a page. We are seeing the needs to support session state across multiple pages.
> 
> E.g., we host a service on Hugging Face spaces, and we ask users to login with token first before using the spaces. The ideal case is users just need to login once but use the spaces multiple time without further login (even the page is refreshed, or multiple pages requires login status).

---

<div class="post-metadata">

**Author:** ![xetaverse](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/xetaverse/32/42331_2.png) [@xetaverse](https://discuss.huggingface.co/u/xetaverse)\
**Post date:** [March 6, 2025, 2:58pm UTC](https://discuss.huggingface.co/t/persist-chat-history-for-gradio-api/143677/13 "2025-03-06T14:58:57Z")

</div>

client.ts of gradio:

```
app_reference: string;
options: ClientOptions;

config: Config | undefined;
api_prefix = "";
api_info: ApiInfo<JsApiData> | undefined;
api_map: Record<string, number> = {};
session_hash: string = Math.random().toString(36).substring(2);
jwt: string | false = false;
last_status: Record<string, Status["stage"]> = {};

private cookies: string | null = null;

// streaming
stream_status = { open: false };
pending_stream_messages: Record<string, any[][]> = {};
pending_diff_streams: Record<string, any[][]> = {};
event_callbacks: Record<string, (data?: unknown) => Promise<void>> = {};
unclosed_events: Set<string> = new Set();
heartbeat_event: EventSource | null = null;
abort_controller: AbortController | null = null;
stream_instance: EventSource | null = null;
current_payload: any;
ws_map: Record<string, WebSocket | "failed"> = {};

```

example:

```
  console.log(cli.config);
  cli.close()

```

---

<div class="post-metadata">

**Author:** ![xetaverse](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/xetaverse/32/42331_2.png) [@xetaverse](https://discuss.huggingface.co/u/xetaverse)\
**Post date:** [March 6, 2025, 3:00pm UTC](https://discuss.huggingface.co/t/persist-chat-history-for-gradio-api/143677/14 "2025-03-06T15:00:53Z")

</div>

It just stores data in local storage, I want to continue the chat like chatgpt