Hugging Face's logo

Spaces:
visionLMsftw
/
comparevlms
Running

App Files Community
8
sergiopaniego HF Staff commited on
Commit
34d8325
·
verified ·
1 Parent(s): 49eb64d

Enable dark mode (#2)

Browse files

- Enable dark mode (12d6ecae5b1e72b4c46ad318ab5fe44ada4d2e98)

Files changed (1) hide show
  1. utils.py +18 -17
utils.py CHANGED
@@ -27,14 +27,16 @@ def display_model_responses_html(evaluation_data, responses, model, start_index=
27
  <div style="display: flex; margin-bottom: 20px; align-items: flex-start;">
28
  <a href="{image_full_url}" target="_blank">
29
  <img src="data:image/png;base64,{image_thumbnail}" alt="Example Image"
30
- style="height: 200px; margin-right: 20px; border-radius: 8px; cursor: zoom-in;"/>
31
- <!--onclick="openImage(this.src)" /> -->
32
  </a>
33
- <div style="flex: 1; background-color: #f8f9fa; padding: 16px 20px; border-radius: 12px;
34
  font-family: 'Segoe UI', sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
35
- <p style="margin: 0 0 10px; font-size: 14px; color: #6c757d;"><strong style="color: #343a40;">Category:</strong> {category}</p>
36
- <p style="margin: 0 0 10px; font-size: 16px;"><strong style="color: #495057;">Prompt:</strong> {prompt}</p>
37
- <p style="margin: 0; font-size: 16px;"><strong style="color: #495057;">Response:</strong> {response}</p>
 
 
 
38
  </div>
39
  </div>
40
  <hr/>
@@ -62,19 +64,18 @@ def display_example_responses_html(evaluation_data, responses, models, example_i
62
  <a href="{image_full_url}" target="_blank">
63
  <img src="data:image/png;base64,{image_thumbnail}" alt="Example Image"
64
  style="height: 200px; margin-right: 20px; border-radius: 8px; cursor: zoom-in;"/>
65
- <!--onclick="openImage(this.src)" /> -->
66
  </a>
67
- <div style="flex: 1; background-color: #f8f9fa; padding: 16px 20px; border-radius: 12px;
68
- font-family: 'Segoe UI', sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
69
- <p style="margin: 0 0 10px; font-size: 14px; color: #6c757d;">
70
- <strong style="color: #343a40;">Category:</strong> {category}</p>
71
- <p style="margin: 0 0 10px; font-size: 16px;">
72
- <strong style="color: #495057;">Prompt:</strong> {prompt}</p>
73
- <div>
74
- <strong style="color: #495057; font-size: 16px;">Responses:</strong>
75
  {responses_html}
76
- </div>
77
- </div>
78
  </div>
79
  <hr/>
80
  """
 
27
  <div style="display: flex; margin-bottom: 20px; align-items: flex-start;">
28
  <a href="{image_full_url}" target="_blank">
29
  <img src="data:image/png;base64,{image_thumbnail}" alt="Example Image"
30
+ style="height: 200px; margin-right: 20px; border-radius: 8px; cursor: zoom-in;" />
 
31
  </a>
32
+ <div style="flex: 1; background-color: var(--block-background-fill); padding: 16px 20px; border-radius: 12px;
33
  font-family: 'Segoe UI', sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
34
+ <p style="margin: 0 0 10px; font-size: 14px; color: var(--secondary-text-color);">
35
+ <strong style="color: var(--body-text-color);">Category:</strong> {category}</p>
36
+ <p style="margin: 0 0 10px; font-size: 16px;">
37
+ <strong style="color: var(--body-text-color);">Prompt:</strong> {prompt}</p>
38
+ <p style="margin: 0; font-size: 16px;">
39
+ <strong style="color: var(--body-text-color);">Response:</strong> {response}</p>
40
  </div>
41
  </div>
42
  <hr/>
 
64
  <a href="{image_full_url}" target="_blank">
65
  <img src="data:image/png;base64,{image_thumbnail}" alt="Example Image"
66
  style="height: 200px; margin-right: 20px; border-radius: 8px; cursor: zoom-in;"/>
 
67
  </a>
68
+ <div style="flex: 1; background-color: var(--block-background-fill); padding: 16px 20px; border-radius: 12px;
69
+ font-family: 'Segoe UI', sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
70
+ <p style="margin: 0 0 10px; font-size: 14px; color: var(--secondary-text-color);">
71
+ <strong style="color: var(--body-text-color);">Category:</strong> {category}</p>
72
+ <p style="margin: 0 0 10px; font-size: 16px;">
73
+ <strong style="color: var(--body-text-color);">Prompt:</strong> {prompt}</p>
74
+ <div>
75
+ <strong style="color: var(--body-text-color); font-size: 16px;">Responses:</strong>
76
  {responses_html}
77
+ </div>
78
+ </div>
79
  </div>
80
  <hr/>
81
  """