Spaces:
Running
Running
File size: 4,792 Bytes
9b2cf74 49eb64d 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 |
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)
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_output = gr.HTML()
current_index = gr.State(value=0)
current_html = gr.State(value="")
def load_initial(model):
html = display_model_responses_html(evaluation_data, responses, model, 0)
return html, 5, html
def load_more(model, index, html_so_far):
new_html = display_model_responses_html(evaluation_data, responses, model, index)
updated_html = html_so_far + new_html
return updated_html, index + 5, updated_html
selected_model.change(load_initial, selected_model, [model_output, current_index, current_html])
demo.load(load_initial, inputs=selected_model, 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], outputs=[model_output, current_index, current_html])
default_category = evaluation_data[0]["category"]
default_example_id = evaluation_data[0]["id"]
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()
|