Spaces:
Running
Running
File size: 5,473 Bytes
9b2cf74 49eb64d 9b2cf74 2d04ce8 9b2cf74 2d04ce8 9b2cf74 2d04ce8 9b2cf74 2d04ce8 9b2cf74 2d04ce8 9b2cf74 2d04ce8 9b2cf74 2d04ce8 9b2cf74 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 |
import gradio as gr
import gradio.themes.base
from utils import *
from data_utils import *
from datasets import load_dataset
ds = load_dataset("visionLMsftw/vibe-testing-samples", split="train")
evaluation_data = get_evaluation_data(ds)
ds_results = load_dataset("visionLMsftw/vibe-testing-results", split="train")
models = get_model_names(ds_results)
responses = get_responses(ds_results)
default_category = evaluation_data[0]["category"]
default_example_id = evaluation_data[0]["id"]
with gr.Blocks(theme=gr.themes.Soft()) as demo:
gr.Markdown("# VLMVibeEval")
gr.Markdown("VLM evaluation leaderboard based on vibes.")
mode = gr.Radio(["View model-wise responses", "Compare model responses on a specific example"], label="Mode", value="View model-wise responses")
with gr.Column(visible=True) as model_mode:
selected_model = gr.Dropdown(models, label="Choose model")
model_category = gr.Dropdown(
choices=list(set(ex["category"] for ex in evaluation_data)),
label="Category",
value=default_category
)
model_output = gr.HTML()
current_index = gr.State(value=0)
current_html = gr.State(value="")
def load_initial(model, category):
html = display_model_responses_html(evaluation_data, responses, model, start_index=0, batch_size=5, category=category)
return html, 5, html
def load_more(model, index, html_so_far, category):
new_html = display_model_responses_html(evaluation_data, responses, model, start_index=index, batch_size=5, category=category)
updated_html = html_so_far + new_html
return updated_html, index + 5, updated_html
selected_model.change(
load_initial,
inputs=[selected_model, model_category],
outputs=[model_output, current_index, current_html]
)
model_category.change(
load_initial,
inputs=[selected_model, model_category],
outputs=[model_output, current_index, current_html]
)
demo.load(
load_initial,
inputs=[selected_model, model_category],
outputs=[model_output, current_index, current_html]
)
more_button = gr.Button("Load more")
more_button.click(
load_more,
inputs=[selected_model, current_index, current_html, model_category],
outputs=[model_output, current_index, current_html]
)
with gr.Column(visible=False) as example_mode:
category = gr.Dropdown(
choices=list(set(ex["category"] for ex in evaluation_data)),
label="Category",
value=default_category
)
example = gr.Dropdown(
label="Example",
value=default_example_id,
choices=get_examples_by_category(evaluation_data, default_category)
)
example_display = gr.HTML()
category.change(lambda c: gr.update(choices=get_examples_by_category(evaluation_data, c)), category, example)
example.change(
fn=lambda ex_id: display_example_responses_html(evaluation_data, responses, models, ex_id),
inputs=example,
outputs=example_display
)
demo.load(fn=lambda: display_example_responses_html(evaluation_data, responses, models, default_example_id), inputs=None, outputs=example_display)
def switch_mode(selected):
return {
model_mode: gr.update(visible=selected == "View model-wise responses"),
example_mode: gr.update(visible=selected == "Compare model responses on a specific example"),
}
mode.change(switch_mode, mode, [model_mode, example_mode])
gr.HTML(r"""
<style>
#image-modal {
display: none;
position: fixed;
z-index: 999;
left: 0; top: 0;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
}
#image-modal img {
max-width: 90%;
max-height: 90%;
border-radius: 8px;
box-shadow: 0 0 20px rgba(255,255,255,0.3);
}
#image-modal .close {
position: absolute;
top: 20px; right: 30px;
font-size: 32px;
color: #fff;
cursor: pointer;
font-weight: bold;
}
</style>
<div id="image-modal" onclick="closeModal(event)">
<span class="close" onclick="closeModal(event)">×</span>
<img id="modal-img" src="" alt="Enlarged Image" />
</div>
<script>
function openImage(src) {
const modal = document.getElementById('image-modal');
const img = document.getElementById('modal-img');
img.src = src;
modal.style.display = 'flex';
}
function closeModal(event) {
if (event.target.id === 'image-modal' || event.target.classList.contains('close')) {
document.getElementById('image-modal').style.display = 'none';
}
}
// Optional: close on ESC key
document.addEventListener('keydown', function(e) {
if (e.key === "Escape") {
document.getElementById('image-modal').style.display = 'none';
}
});
</script>
""")
demo.launch()
|