Hugging Face's logo

Spaces:
devadit15
/
rubriq
Running

App Files Community
rubriq
File size: 4,954 Bytes
f42149e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ef02a0a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f42149e
2742f26
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f42149e
2742f26
f42149e
 
 
 
 
 
 
 
 
 
 
 
 
37afc86
 
 
 
 
f42149e
 
 
 
 
37afc86
ef02a0a
f42149e
 
 
 
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rubriq — LLM output evaluation, locally</title>
<meta name="description" content="Paste a prompt and the LLM output you got back. Rubriq scores it against published evaluation research, quotes the evidence, and writes the repair prompt.">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%232e5c3f'/%3E%3Ctext x='16' y='23' font-family='Georgia,serif' font-size='20' font-weight='bold' fill='white' text-anchor='middle'%3Er%3C/text%3E%3C/svg%3E">
<link rel="stylesheet" href="styles.css">
<script src="config.js"></script>
</head>
<body>

<header class="topbar">
  <div class="brand">
    <span class="wordmark">Rubriq</span>
    <span class="brand-note">output evaluation · runs locally</span>
  </div>
  <div class="topbar-right">
    <span class="engine-pill" id="enginePill" role="status">
      <span class="engine-dot" aria-hidden="true"></span>
      <span id="engineLabel">connecting…</span>
    </span>
    <a class="top-link" href="https://github.com/devadit1515/rubriq" target="_blank" rel="noopener">GitHub</a>
  </div>
</header>

<main class="split">
  <section class="pane pane-input" aria-label="Evaluation input">
    <form id="evalForm" autocomplete="off">
      <div class="field">
        <label for="promptIn">The prompt you gave</label>
        <textarea id="promptIn" rows="7" spellcheck="false"
          placeholder="Paste the exact prompt, including any source text it contained." required></textarea>
      </div>

      <div class="field">
        <label for="outputIn">The output you got back</label>
        <textarea id="outputIn" rows="9" spellcheck="false"
          placeholder="Paste the model's full response." required></textarea>
      </div>

      <fieldset class="field field-model">
        <legend>Which model produced it <span class="opt">optional — tunes the repair prompts</span></legend>
        <div class="combo-row">
          <div class="combo" data-combo="provider">
            <input id="providerIn" role="combobox" aria-expanded="false" aria-autocomplete="list"
                   aria-controls="providerList" placeholder="Provider" aria-label="Provider">
            <button type="button" class="combo-toggle" tabindex="-1" aria-hidden="true">▾</button>
            <ul class="combo-list" id="providerList" role="listbox" hidden></ul>
          </div>
          <div class="combo" data-combo="model">
            <input id="modelIn" role="combobox" aria-expanded="false" aria-autocomplete="list"
                   aria-controls="modelList" placeholder="Model" aria-label="Model">
            <button type="button" class="combo-toggle" tabindex="-1" aria-hidden="true">▾</button>
            <ul class="combo-list" id="modelList" role="listbox" hidden></ul>
          </div>
        </div>
      </fieldset>

      <fieldset class="field field-tone">
        <legend>Expected tone <span class="opt">sets the reading-level check</span></legend>
        <div class="tone-row" role="radiogroup" aria-label="Expected tone">
          <label class="tone-chip">
            <input type="radio" name="tone" value="" data-audience="" checked>
            <span>Neutral</span>
          </label>
          <label class="tone-chip">
            <input type="radio" name="tone" value="simple, plain language" data-audience="general readers">
            <span>Simple</span>
          </label>
          <label class="tone-chip">
            <input type="radio" name="tone" value="professional" data-audience="professional">
            <span>Professional</span>
          </label>
          <label class="tone-chip">
            <input type="radio" name="tone" value="technical" data-audience="expert">
            <span>Technical</span>
          </label>
        </div>
      </fieldset>

      <div class="actions">
        <button type="submit" class="btn btn-primary" id="evalBtn">Evaluate output</button>
        <button type="button" class="btn btn-ghost" id="clearBtn">Clear</button>
      </div>

      <div class="samples" aria-label="Sample pairs">
        <span class="samples-label">or try a sample:</span>
        <div class="samples-row" id="sampleChips"></div>
      </div>
    </form>
  </section>

  <section class="pane pane-report" aria-label="Evaluation report">
    <div class="read-progress" aria-hidden="true"><div class="read-progress-fill" id="readProgress"></div></div>
    <div id="reportPane" aria-live="polite">
      <!-- empty / skeleton / report / error rendered by app.js -->
    </div>
  </section>
</main>

<div class="toast" id="toast" role="status" hidden></div>

<script src="vendor/motion.js"></script>
<script src="models.js"></script>
<script src="samples.js"></script>
<script src="app.js"></script>
</body>
</html>