PageSourceSearch

https://biomed-vital.github.io/

html biomed-vital.github.io collected 2026-10-03 08:42:49 UTC 29,757 bytes, 660 lines download raw bytes

1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="utf-8">
6  <meta name="description" content="Visual Instruction Tuning">
7  <meta name="keywords" content="multimodal chatbot">
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9  <title>BioMed-VITAL</title>
10
11  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro">
12  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
13  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
14  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
15  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
16  <link rel="stylesheet" href="./static/css/index.css">
17  <link rel="icon" href="images/logo.png">
18  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
19
20
21  
21<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
21
22  
22<script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js"></script>
22
23  
23<script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/4.16.0/gradio.js"></script>
23
24</head>
25
26<style>
27  .expandable-card .card-text-container {
28    max-height: 200px;
29    overflow-y: hidden;
30    position: relative;
31  }
32
33  .expandable-card.expanded .card-text-container {
34    max-height: none;
35  }
36
37
38  .expand-btn {
39    position: relative;
40    display: none;
41    background-color: rgba(255, 255, 255, 0.8);
42    /* margin-top: -20px; */
43    /* justify-content: center; */
44    color: #510c75;
45    border-color: transparent;
46  }
47
48  .expand-btn:hover {
49    background-color: rgba(200, 200, 200, 0.8);
50    text-decoration: none;
51    border-color: transparent;
52    color: #510c75;
53  }
54
55  .expand-btn:focus {
56    outline: none;
57    text-decoration: none;
58  }
59
60  .expandable-card:not(.expanded) .card-text-container:after {
61    content: "";
62    position: absolute;
63    bottom: 0;
64    left: 0;
65    width: 100%;
66    height: 90px;
67    background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 1));
68  }
69
70  .expandable-card:not(.expanded) .expand-btn {
71    margin-top: -40px;
72  }
73
74  .card-body {
75    padding-bottom: 5px;
76  }
77
78  .vertical-flex-layout {
79    justify-content: center;
80    align-items: center;
81    height: 100%;
82    display: flex;
83    flex-direction: column;
84    gap: 5px;
85  }
86
87  .figure-img {
88    max-width: 100%;
89    height: auto;
90  }
91
92  .adjustable-font-size {
93    font-size: calc(0.5rem + 2vw);
94  }
95
96  .chat-history {
97    flex-grow: 1;
98    overflow-y: auto;
99    /* overflow-x: hidden; */
100    padding: 5px;
101    border-bottom: 1px solid #ccc;
102    margin-bottom: 10px;
103  }
104
105  #gradio pre {
106    background-color: transparent;
107  }
108</style>
109
110<body>
111
112
113  <section class="hero">
114    <div class="hero-body">
115      <div class="container is-max-desktop">
116        <div class="columns is-centered">
117          <div class="column has-text-centered">
118            <h1 class="title is-1 publication-title">Biomedical Visual Instruction Tuning with Clinician Preference Alignment</h1>
119            <h3 class="title is-3 publication-title">BioMed-VITAL</h3>
120            <div class="is-size-5 publication-authors">
121              <span class="author-block">
122              <a href="" style="color:#f68946;font-weight:normal;">Hejie Cui<sup>1,2 *</sup></a>,
123              </span>
124              <span class="author-block">
125                  <a href="" style="color:#008AD7;font-weight:normal;">Lingjun Mao<sup>3 *</sup></a>,
126              </span>
127              <span class="author-block">
128                  <a href="" style="color:#F2A900;font-weight:normal;">Xin Liang<sup>3</sup></a>,
129              </span>
130              <span class="author-block">
131                  <a href="" style="color:#f68946;font-weight:normal;">Jieyu Zhang<sup>4</sup></a>,
132              </span>
133              <span class="author-block">
134                  <a href="" style="color:#008AD7;font-weight:normal;">Hui Ren<sup>5,6</sup></a>,
135              </span>
136              <span class="author-block">
137                  <a href="" style="color:#F2A900;font-weight:normal;">Quanzheng Li<sup>5,6</sup></a>,
138              </span>
139              <span class="author-block">
140                  <a href="" style="color:#f68946;font-weight:normal;">Xiang Li<sup>5,6</sup></a>,
141              </span>
142              <span class="author-block">
143                  <a href="" style="color:#008AD7;font-weight:normal;">Carl Yang<sup>2</sup></a>
144              </span>
145            </div>
146
147            <div class="is-size-5 publication-authors">
148                <p><sup>1</sup>Stanford University, <sup>2</sup>Emory University, <sup>3</sup>University of California, Berkeley,</p>
149                <p><sup>4</sup>University of Washington, <sup>5</sup>Massachusetts General Hospital, <sup>6</sup>Harvard Medical School</p>
150            </div>
151
152            <div class="is-size-6 publication-authors">
153              <span class="author-block"><sup>*</sup>Equal Contribution</span>
154            </div>
155
156            
157          <!-- <div class="column has-text-centered">
158            <h3 class="title is-3 publication-title">Improved Baselines with Visual Instruction Fine-tuning</h3>
159            <div class="is-size-5 publication-authors">
160              <span class="author-block">
161                <a href="https://hliu.cc/" style="color:#f68946;font-weight:normal;">Haotian Liu<sup>*</sup></a>,
162              </span>
163              <span class="author-block">
164                <a href="https://chunyuan.li/" style="color:#008AD7;font-weight:normal;">Chunyuan Li<sup>*</sup></a>,
165              </span>
166              <span class="author-block">
167                <a href="https://yuheng-li.github.io" style="color:#008AD7;font-weight:normal;">Yuheng Li</a>,
168              </span>
169              <span class="author-block">
170                <a href="https://pages.cs.wisc.edu/~yongjaelee/" style="color:#f68946;font-weight:normal;">Yong Jae
171                  Lee</a>
172              </span>
173            </div>
174
175            <div class="is-size-5 publication-authors">
176              <span class="author-block"><b style="color:#f68946; font-weight:normal">&#x25B6 </b> University of
177                Wisconsin-Madison</b></span>
178              <span class="author-block"><b style="color:#008AD7; font-weight:normal">&#x25B6 </b> Microsoft Research</span>
179            </div> -->
180
181            <div class="column has-text-centered">
182              <div class="publication-links">
183                <span class="link-block">
184                  <a href="https://arxiv.org/abs/2406.13173" target="_blank"
185                    class="external-link button is-normal is-rounded is-dark">
186                    <span class="icon">
187                      <i class="ai ai-arxiv"></i>
188                    </span>
189                    <span>arXiv</span>
190                  </a>
191                </span>
192                <span class="link-block">
193                  <a href="https://github.com/mao1207/BioMed-VITAL" target="_blank"
194                    class="external-link button is-normal is-rounded is-dark">
195                    <span class="icon">
196                      <i class="fab fa-github"></i>
197                    </span>
198                    <span>Code</span>
199                  </a>
200                </span>
201                <span class="link-block">
202                  <a href="https://huggingface.co/datasets/mao1207/BioMed-VITAL-instructions" target="_blank"
203                    class="external-link button is-normal is-rounded is-dark">
204                    <span class="icon">
205                      <i class="fas fa-database"></i>
206                    </span>
207                    <span>Dataset</span>
208                  </a>
209                </span>
210                <span class="link-block">
211                  <a href="https://huggingface.co/mao1207/BioMed-VITAL-models" target="_blank"
212                    class="external-link button is-normal is-rounded is-dark">
213                    <span class="icon">
214                      <i class="fas fa-share-square"></i>
215                    </span>
216                    <span>Model</span>
217                  </a>
218                </span>
219
220
221                
222
223                <!-- <span class="link-block">
224                <a href="#"
225                   class="external-link button is-normal is-rounded is-dark">
226                  <span class="icon">
227                    <i class="fab fa-youtube"></i>
228                  </span>
229                  <span>Video</span>
230                  </a>
231              </span> -->
232              </div>
233            </div>
234          </div>
235        </div>
236      </div>
237    </div>
238  </section>
239
240
241  <section class="hero teaser">
242    <div class="container is-max-desktop">
243      <div style="text-align: center;">
244        <img id="teaser" width="90%" src="images/updated_instruction_data_framework_00.png">     
245      </div>
246      <div class="hero-body">
247        <h4 class="subtitle has-text-centered">
248          <br><br>
249          <p style="text-align: left;" width="70%">
250              In this work, we propose a data-centric framework, <strong>Biomed</strong>ical <strong>V</strong>isual <strong>I</strong>nstruction <strong>T</strong>uning with Clinician Preference <strong>Al</strong>ignment (<strong>BiomedVITAl</strong>), that incorporates clinician preferences into both stages of generating and selecting instruction data for tuning biomedical multimodal foundation models.
251              First, during the generation stage, we prompt the GPT-4V generator with a diverse set of clinician-selected demonstrations for preference-aligned data candidate generation. Then, during the selection phase, we train a separate selection model, which explicitly distills clinician and policy-guided model preferences into a rating function to select high-quality data for medical instruction tuning.
252              Results show that the model tuned with the instruction-following data from our method demonstrates a significant improvement in o
252pen visual chat (18.5% relatively) and medical VQA (win rate up to 81.73%).
253          </p>
254        </h4>
255      </div>
256    </div>
257  </section>
258
259  <!-- <section class="section"  style="background-color:#efeff081">
260    <div class="container is-max-desktop" id="gradio">
261      <gradio-app src="https://llava.hliu.cc"></gradio-app>
262    </div>
263  </section> -->
264
265  <section class="section"  style="background-color:#efeff081">
266    <div class="container is-max-desktop">
267      <!-- Abstract. -->
268      <div class="columns is-centered has-text-centered">
269        <div class="column is-six-fifths">
270          <h2 class="title is-3">Contribution</h2>
271          <div class="content has-text-justified" width="70%">
272            <p>
273              <ol type="1">
274                <li>We introduce a data-centric framework <b>BioMed-VITAL</b>, which generates and selects instruction-following data aligned with clinician preference for visual instruction tuning. Evaluation indicates an improved data quality and our instruction-tuned models remarkably improve in both open visual chat (18.5% relatively) and three biomedical VQA benchmarks (win rate up to 81.73%). </span></li>
275                <li>We propose a paradigm involving clinician preference during generation and an effective data selection model based on a mixture of preferences. It is shown that our distilled data selection model excels in matching human preferences compared with judgments of GPT-4.</li>
276                <li>To facilitate further study, we release 80K clinician preference-aligned instruction-following datasets generated and selected from ours, along with the models instruction-tuned based on them.</li>
277              </ol>  
278           </p>
279  
280          </div>
281        </div>
282      </div>
283        
284    </div>
285  </section>
286
287
288  
289<section class="section">
290  <!-- Results. -->
291  <div class="columns is-centered has-text-centered">
292    <div class="column is-six-fifths">
293      <h2 class="title is-3"><img id="painting_icon" width="3%" src="images/logo2.png"> Multimodal Medical Instrucion-Following Data</h2>
294    </div>
295  </div>
296  <!-- </div> -->
297  <!--/ Results. -->    
298<div class="container is-max-desktop">
299
300  <div class="columns is-centered">
301    <div class="column is-full-width">
302      <div class="content has-text-justified">
303        <p>
304          Based on the PMC-15 dataset, we utilized gpt-4-vision-preview API to generate multi-round QA instructional data and conducted a two-stage clinician preference alignment process, selecting 60K and 80K language-image instruction-following samples. Additionally, we combined the filtered 80K samples with 10K and 60K samples provided by LLaVA-Med, resulting in a larger dataset of 150K samples (80K+10K+60K). We also offer an intermediate dataset of 60K samples that only incorporates the second stage of preference distillation, merging these to form a dataset of 210K samples (80K+10K+60K+60K).
305          <a href="https://huggingface.co/datasets/mao1207/BioMed-VITAL-instructions">[HuggingFace Dataset]</a>.
306
307<!-- CSS Code: Place this code in the document's head (between the 'head' tags) -->
308<style>
309  table.GeneratedTable {
310    width: 100%;
311    background-color: #ffffff;
312    border-collapse: collapse;
313    border-width: 2px;
314    border-color: #c1c4c5;
315    border-style: solid;
316    color: #000000;
317  }
318  
319  table.GeneratedTable td, table.GeneratedTable th {
320    border-width: 2px;
321    border-color: #9b9d9e;
322    border-style: solid;
323    padding: 3px;
324  }
325  
326  table.GeneratedTable thead {
327    background-color: #6691ee;
328  }
329  </style>
330  
331  <!-- HTML Code: Place this code in the document's body (between the 'body' tags) where the table should appear -->
332  <div class="column is-six-fifths" width="70%">
333  <table class="GeneratedTable">
334    <thead>
335      <tr>
336        <th>Data file name</th>
337        <th>File Size</th>
338        <th>Sample Size</th>
339      </tr>
340    </thead>
341    <tbody>
342      <tr>
343        <td><a href="https://huggingface.co/datasets/mao1207/BioMed-VITAL-instructions/blob/main/BioMed-VITAL-instructions-60K.json">BioMed-VITAL-instructions-60K.json</a> </td>
344        <td>127 MB</td>
345        <td>60K</td>
346      </tr>
347      <tr>
348        <td><a href="https://huggingface.co/datasets/mao1207/BioMed-VITAL-instru
348ctions/blob/main/BioMed-VITAL-instructions-80K.json">BioMed-VITAL-instructions-80K.json</a> </td>
349        <td>156 MB</td>
350        <td>80K</td>
351      </tr>
352      <tr>
353        <td><a href="https://huggingface.co/datasets/mao1207/BioMed-VITAL-instructions/blob/main/BioMed-VITAL-instructions-150K.json">BioMed-VITAL-instructions-150K.json</a> </td>
354        <td>309 MB</td>
355        <td>60K + 10K + 80K</td>
356      </tr>
357      <tr>
358        <td><a href="https://huggingface.co/datasets/mao1207/BioMed-VITAL-instructions/blob/main/BioMed-VITAL-instructions-210K.json">BioMed-VITAL-instructions-210K.json</a> </td>
359        <td>463 MB</td>
360        <td>80K + 10K + 60K + 60K</td>
361      </tr>
362    </tbody>
363  </table>
364    
365</div>
366
367<p>
368  You can download the original images from the following link:
369  <!-- Codes by Quackit.com -->
370  
371    <!-- HTML Code: Place this code in the document's body (between the 'body' tags) where the table should appear -->
372  <div class="column is-six-fifths" width="70%">
373  <table class="GeneratedTable">
374    <thead>
375      <tr>
376        <th>Data file name</th>
377        <th>File Size</th>
378      </tr>
379    </thead>
380    <tbody>
381      <tr>
382        <td><a href="https://github.com/mao1207/BioMed-VITAL/blob/main/data/PMC_image_urls.jsonl">PMC_image_urls.jsonl</a> </td>
383        <td>129 MB</td>
384      </tr>
385  </table>
386    
387</div>
388      </div>
389
390  
391
392
393
394      
395
396    </div>
397  </div>
398
399
400</section>
401
402
403<section class="section">
404
405  <div class="columns is-centered has-text-centered">
406    <div class="column is-six-fifths">
407      <h2 class="title is-3"> Case Study</h2>
408    </div>
409  </div>
410
411    <div class="columns is-centered has-text-centered">
412      <div class="column is-six-fifths">
413         <h2 class="title is-4">Biomedical Visual Instruction-Following Example</h2>
414      </div>
415      </div>  
416
417    <section class="hero teaser">
418    <div class="container is-max-desktop">
419      <div style="text-align: center;">
420        <img id="teaser" width="90%" src="images/case_update2_00.png">     
421      </div>
422    </div>
423    </section>
424    <!-- <div class="columns is-centered has-text-centered">
425    <div class="column is-six-fifths">
426      <img id="teaser" width="55%" src="images/case_update2_00.png">
427    </div>
428    </div>   -->
429
430  </div>
431</section>
432
433  <section class="section" id="BibTeX">
434    <div class="container is-max-desktop content">
435      <h2 class="title">BibTeX</h2>
436      <pre><code>
437@article{cui2024biomedical,
438  title={Biomedical Visual Instruction Tuning with Clinician Preference Alignment}, 
439  author={Cui, Hejie and Mao, Lingjun and Liang, Xin and Zhang, Jieyu and Ren, Hui and Li, Quanzheng and Li, Xiang and Yang, Carl},
440   journal={Advances in Neural Information Processing Systems},
441  year={2024}
442}
443  
444  </code></pre>
445    </div>
446  </section>
447  
448  <section class="section" id="Acknowledgement">
449    <div class="container is-max-desktop content">
450      <h2 class="title">Acknowledgement</h2>
451      <p>
452        This website is adapted from <a
453        href="https://github.com/nerfies/nerfies.github.io">Nerfies</a>, licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative
454        Commons Attribution-ShareAlike 4.0 International License</a>.  We thank the LLaVA and LLaVA-Med team for giving us access to their models, and open-source projects, including BioMed-CLIP.
455      </p>
456
457      <p>
458<b>Usage and License Notices</b>: The data, code and checkpoint is intended and licensed for research use only. They are also restricted to uses that follow the license agreement of CLIP,  LLaVA and GPT-4. The dataset is CC BY NC 4.0 (allowing only non-commercial use) and models trained using the dataset should not be used outside of research purposes.
459</p> 
460    </div>
461  </section>
462
463  <section class="section" id="License">
464    <div class="container is-max-desktop content">
465      <h2 class="title">License</h2>
466      <p>
467        The source code of this repository is released under the Apache License 2.0. The model license and dataset license are listed on their corresponding webpages.
468      </p>
469    </div>
470  </section>
471
472  
472<script>
473    // Handle message showing
474    function createChatRow(sender, text, imageSrc) {
475      var article = document.createElement("article");
476      article.className = "media"
477
478      var figure = document.createElement("figure");
479      figure.className = "media-left";
480
481      var span = document.createElement("span");
482      span.className = "icon is-large";
483
484      var icon = document.createElement("i");
485      icon.className = "fas fas fa-2x" + (sender === "User" ? " fa-user " : sender === "LLaVA" ? " fa-robot" : "");
486
487      var media = document.createElement("div");
488      media.className = "media-content";
489
490      var content = document.createElement("div");
491      content.className = "content";
492
493      var para = document.createElement("p");
494
495      // wrap text in pre tag to preserve whitespace and line breaks
496      var pre_text = document.createElement("pre");
497      pre_text.style = "background-color: white; font-size: 18px; font-family: Arial; padding: 0; margin: 0; white-space: pre-wrap; word-wrap: break-word;";
498      var paraText = document.createTextNode(text);
499      pre_text.appendChild(paraText);
500
501      var strong = document.createElement("strong");
502      strong.innerHTML = sender;
503      var br = document.createElement("br");
504
505      para.appendChild(strong);
506      para.appendChild(br);
507      para.appendChild(pre_text);
508
509      // Add image if imageSrc is provided
510      if (imageSrc) {
511        var img = document.createElement("img");
512        img.src = imageSrc;
513        img.style = "max-width: 100%; max-height: 300px;"; // Adjust the style as needed
514        para.appendChild(img);
515      }
516
517      content.appendChild(para);
518      media.appendChild(content);
519      span.appendChild(icon);
520      figure.appendChild(span);
521      if (sender !== "Description") {
522        article.appendChild(figure);
523      };
524      article.appendChild(media);
525      return article;
526    }
527
528    function addMessageToChatHistory(sender, message, imageSrc) {
529      const chatHistory = document.querySelector('.chat-history');
530      const chatRow = createChatRow(sender, message, imageSrc);
531      chatHistory.appendChild(chatRow);
532      chatHistory.scrollTop = chatHistory.scrollHeight;
533    }
534
535    function clearChatHistory() {
536      const chatHistory = document.querySelector('.chat-history');
537      chatHistory.innerHTML = "";
538    }
539
540    // 
541    const conversations = [
542      {
543        "description": "monalisa",
544        "turns": [
545          // ["Description", "Please read the description and answer the question."],
546          ["User", "", "/static/images/monalisa.jpg"],
547          ["User", "Do you know who drew this painting?​"],
548          ["LLaVA",
549            "The painting depicts a woman, commonly believed to be Mona Lisa, the famous artwork by Leonardo da Vinci. " +
550            "It is a portrait painting that showcases the woman's enigmatic smile and has become one of the most famous and iconic art pieces in the world. " +
551            "The original work is displayed in the Louvre Museum in Paris, and it is known for its intricate details, use of oil paint, and the artist's innovative techniques that contributed to its enduring appeal and mystery.​​"
552          ]
553        ]
554      },
555      {
556        "description": "monalisa with dog head",
557        "turns": [
558          ["User", "", "/static/images/monalisa-fun.jpg"],
559          ["User", "Do you know who drew this painting?​"],
560          ["LLaVA", "The painting depicts a dog in a humorous situation, where it appears to be wearing a woman's dress and standing in front of a landscape. Although the artist of the painting is not explicitly identified, it could be a reference to the famous artist Da Vinci, known for his artistic works, including the Mona Lisa. The painting is likely a creative and comical take on the traditional portrait style, replacing a human figure with a dog dressed in a woman's clothing, making it an interesting and amusing visual piece.​"]
561        ]
562      },
563      {
564        "description": "Titanic Rose and Jack",
565        "turns": [
566          ["User", "", "/static/images/titanic.jpg"],
567          ["User", "What's the ending of this movie?​​"],
568          ["LLaVA", "​In the image, a young woman is leaning on a man in front of a beautiful sunset, with both of them standing on a boat. They appear to be enjoying a romantic moment together. The scene suggests that they could be depicted as the characters Jack and Rose from the popular movie Titanic. In the mov
568ie, their romance blossoms aboard the fictional ocean liner Titanic, with the pair ultimately sharing a passionate kiss as the ship sinks into the ocean. The ending of the movie is known for its emotional and heartfelt scenes, where the characters are forced to say goodbye to each other as they are separated by the sinking ship. The image evokes a sense of romance and nostalgia, paying tribute to the iconic love story portrayed in the movie Titanic.​"]
569        ]
570      },
571      {
572        "description": "Fridge",
573        "turns": [
574          ["User", "", "/static/images/fridge.jpg"],
575          ["User", "What are the meals that I can cook with these?​​"],
576          ["LLaVA", "With the variety of food items stored in the refrigerator, you can prepare several meals. For example, you can create a fruit salad using the strawberries, blueberries, and carrots. Additionally, you can make a delicious smoothie using the fruits and vegetables, which would be a healthy and nutritious snack or breakfast option. The milk and eggs can be used to create various dishes, such as a milk-based smoothie, a baked casserole, or scrambled eggs. The juice can also be used to make a fresh fruit and juice mix or as a refreshing homemade popsicle. The possibilities are vast, and the meals you can create will depend on your preferences and dietary needs.​​"],
577          ["User", "I would like to do the fruit salad.  Show me the recipe.​"],
578          ["LLaVA",
579            `Certainly! Here's a simple fruit salad recipe using the items in your refrigerator:​
580
581Ingredients:​
582- 2 cups fresh strawberries, sliced​
583- 1 cup fresh blueberries​
584- 1 large carrot, grated​
585- Juice of half a lemon​
586- A handful of chopped fresh parsley or mint​
587- A few ice cubes​
588- Optional: honey or maple syrup (adjust to taste)​
589
590Instructions:​
5911. In a large bowl, combine the sliced strawberries, blueberries, and carrot. Gently toss them together to mix.​
5922. Drizzle the juice of half a lemon over the fruit and vegetables to prevent them from oxidizing and add a refreshing citrus flavor.​
5933. Sprinkle the chopped fresh parsley or mint over the fruit and gently toss once more.​
5944. If desired, add a drizzle of honey or maple syrup for a touch of sweetness. Adjust the amount according to your taste preferences.​
5955. Cover the bowl and refrigerate the fruit salad for at least 30 minutes or up to a few hours. This allows the flavors to meld and creates a more refreshing salad.​
5966. Serve the fruit salad in cups or bowls, garnished with a sprinkle of fresh parsley or mint, if desired.​
597
598This fruit salad recipe is perfect for a healthy snack or side dish, and with the variety of ingredients available in your refrigerator, it should be easy to put together quickly.`]]
599      },
600      {
601        "description": "Beautiful View",
602        "turns": [
603          ["User", "", "/static/images/view.jpg"],
604          ["User", "What are the things I should be cautious about when I visit here?​​"],
605          ["LLaVA", "When visiting this peaceful location with a pier extending over a serene lake, surrounded by mountains, there are several things to be cautious about. First, pay attention to the weather conditions, as sudden changes in weather, especially strong winds or storms, can cause the water to become rough and pose risks to the stability of the pier. Second, be mindful of the structural integrity of the pier; avoid overloading it with too many people or excessive weight, as this could potentially damage the pier or cause it to collapse. Additionally, be aware of the surrounding wildlife and respect their space; do not harm or disturb them in any way. Finally, if you decide to go fishing, ensure that you adhere to any local fishing regulations and use appropriate fishing techniques to keep the lake ecosystem healthy and maintain the balance of the food chain.​​"],
606          ["User", "Compose an engaging travel blog post about my trip to this place, highlighting the beautiful sceneries, joyful experiences, and include possible anecdotes.​​"],
607          ["LLaVA",
608            `Traveling to this picturesque location with a serene lake and mountains in the background was a refreshing and rejuvenating experience. The pier extending over the calm water provided an excellent vantage point from which to appreciate the breathtaking scenery. As I stood on the pier, I couldn't help but feel a deep connection with nature, taking a moment to soak in the peaceful atmosphere.​
609
610One of the highlights of my trip was undoubtedly the fishing experience. The area is teeming with life, and I was thrilled to land a sizeable catch, despite the modest size of the lake. The joy of fishing in such a beautiful setting was truly rewarding, and it allowed me to take a break from my busy life and truly immerse myself in the tranquility of nature.​
611
612While exploring the surrounding area, I came across a family of birds that had built a nest close to the pier, adding to the charm of the location. Interacting with the wildlife and observing their behavior was an enriching experience that I'll cherish for years to come.​
613
614In conclusion, this idyllic destination provided me with an opportunity to unwind and recharge, surrounded by mesmerizing natural beauty and the gentle sounds of water and wildlife. If you're looking for a serene escape from the hustle and bustle of everyday life, this pier overlooking the lake is the perfect place to find solace and reconnect with nature.`
615          ]
616        ]
617      },
618    ];
619
620    // The current image index
621    let currentIndex = 0;
622
623    // The function to update the displayed chat history
624    function update_dialog_demo() {
625      // Clear the chat history
626      clearChatHistory();
627
628      for (let i = 0; i < conversations[currentIndex].turns.length; i++) {
629        if (conversations[currentIndex].turns[i].length == 2) {
630          addMessageToChatHistory(conversations[currentIndex].turns[i][0], conversations[currentIndex].turns[i][1]);
631        }
632        else {
633          addMessageToChatHistory(conversations[currentIndex].turns[i][0], conversations[currentIndex].turns[i][1], conversations[currentIndex].turns[i][2]);
634        }
635      }
636
637      // scroll to the top of the chat history
638      document.querySelector('.chat-history').scrollTop = 0;
639    }
640
641    // Initialize the displayed image
642    update_dialog_demo();
643
644    // Event listeners for the buttons
645    document.getElementById('prev-question').addEventListener('click', () => {
646      currentIndex = (currentIndex - 1 + conversations.length) % conversations.length;
647      update_dialog_demo();
648    });
649
650    document.getElementById('next-question').addEventListener('click', () => {
651      currentIndex = (currentIndex + 1) % conversations.length;
652      update_dialog_demo();
653    });
654
655
656  </script>
656
657
658</body>
659
660</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.