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">▶ </b> University of 177 Wisconsin-Madison</b></span> 178 <span class="author-block"><b style="color:#008AD7; font-weight:normal">▶ </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.