import base64 import time import markdown from io import BytesIO def image_to_base64(image): buffered = BytesIO() image.save(buffered, format="PNG") img_data = base64.b64encode(buffered.getvalue()).decode() return img_data def get_examples_by_category(evaluation_data, category): return [ex["id"] for ex in evaluation_data if ex["category"] == category] def display_model_responses_html(evaluation_data, responses, model, start_index=0, batch_size=5, category=None): html = "" if category is not None: filtered_data = [ex for ex in evaluation_data if ex["category"] == category] else: filtered_data = evaluation_data for ex in filtered_data[start_index:start_index + batch_size]: image_thumbnail = ex["image_thumbnail"] image_full_url = ex["image_full_url"] prompt = ex["prompt"] category = ex["category"] raw_response = responses[model].get(ex["id"], "(No response)") response_html = markdown.markdown(raw_response, extensions=['fenced_code', 'codehilite']) html += f""" <div style="display: flex; margin-bottom: 20px; align-items: flex-start;"> <img src="data:image/png;base64,{image_thumbnail}" alt="Example Image" style="height: 200px; margin-right: 20px; border-radius: 8px; cursor: zoom-in;" onclick="openImage('{image_full_url}')" /> <div style="flex: 1; background-color: var(--block-background-fill); padding: 16px 20px; border-radius: 12px; font-family: 'Segoe UI', sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,0.05);"> <p style="margin: 0 0 10px; font-size: 14px; color: var(--secondary-text-color);"> <strong style="color: var(--body-text-color);">Category:</strong> {category}</p> <p style="margin: 0 0 10px; font-size: 16px;"> <strong style="color: var(--body-text-color);">Prompt:</strong> {prompt}</p> <div style="margin-top: 10px;"> <strong style="color: var(--body-text-color);">Response:</strong> <div style="margin-top: 4px; font-size: 15px; color: var(--body-text-color);"> {response_html} </div> </div> </div> </div> <hr/> """ return html def display_example_responses_html(evaluation_data, responses, models, example_id): ex = next(e for e in evaluation_data if e["id"] == example_id) image_thumbnail = ex["image_thumbnail"] image_full_url = ex["image_full_url"] category = ex["category"] prompt = ex["prompt"] responses_html = "" for model in models: response = responses[model].get(example_id, "(No response)") response_html = markdown.markdown(response, extensions=['fenced_code', 'codehilite']) responses_html += f'<p style="margin: 0 0 8px;"><strong style="color: #495057;">{model}:</strong> {response_html}</p>' html = f""" <div style="display: flex; margin-bottom: 20px; align-items: flex-start;"> <img src="data:image/png;base64,{image_thumbnail}" alt="Example Image" style="height: 200px; margin-right: 20px; border-radius: 8px; cursor: zoom-in;" onclick="openImage('{image_full_url}')" /> <div style="flex: 1; background-color: var(--block-background-fill); padding: 16px 20px; border-radius: 12px; font-family: 'Segoe UI', sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,0.05);"> <p style="margin: 0 0 10px; font-size: 14px; color: var(--secondary-text-color);"> <strong style="color: var(--body-text-color);">Category:</strong> {category}</p> <p style="margin: 0 0 10px; font-size: 16px;"> <strong style="color: var(--body-text-color);">Prompt:</strong> {prompt}</p> <div> <strong style="color: var(--body-text-color); font-size: 16px;">Responses:</strong> {responses_html} </div> </div> </div> <hr/> """ return html