Add Lab 4 inference settings visualization
This commit is contained in:
c4ch3c4d3
@@ -956,6 +956,511 @@ ol {
|
||||
margin: 1.25rem 0 1.5rem;
|
||||
}
|
||||
|
||||
.lab-content [data-inference-settings-visualization] {
|
||||
margin: 1.25rem 0 1.5rem;
|
||||
}
|
||||
|
||||
.inference-settings-viz {
|
||||
margin: 1.25rem 0 1.5rem;
|
||||
border: 1px solid #d7e4ef;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(180deg, #fbfdff, #f4f9fd);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.inference-settings-viz code {
|
||||
font-family:
|
||||
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||
"Courier New", monospace;
|
||||
}
|
||||
|
||||
.inference-settings-viz__header {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.inference-settings-viz__eyebrow {
|
||||
margin: 0;
|
||||
color: #9a5f00;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.inference-settings-viz__header h3 {
|
||||
margin: 0.1rem 0 0;
|
||||
color: #0f3d58;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.inference-settings-viz__header p:not(.inference-settings-viz__eyebrow) {
|
||||
margin: 0.55rem 0 0;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.inference-settings-viz__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.9rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.inference-settings-viz__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
min-height: 100%;
|
||||
border: 1px solid #dce6ee;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
padding: 0.9rem;
|
||||
}
|
||||
|
||||
.inference-settings-viz__card--wide {
|
||||
grid-column: 1 / -1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.inference-settings-viz__card--wide > * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.inference-settings-viz__card-header h4 {
|
||||
margin: 0;
|
||||
color: #0f3d58;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.inference-settings-viz__card-header p {
|
||||
margin: 0.35rem 0 0;
|
||||
color: #475569;
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.42;
|
||||
}
|
||||
|
||||
.inference-settings-viz__sequence {
|
||||
margin: 0.8rem 0;
|
||||
padding: 0.7rem 0.75rem;
|
||||
border: 1px solid #d6e2ed;
|
||||
border-radius: 10px;
|
||||
background: #f7fbff;
|
||||
color: #12364e;
|
||||
font-family:
|
||||
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||
"Courier New", monospace;
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.35;
|
||||
min-height: 2.85rem;
|
||||
}
|
||||
|
||||
.inference-settings-viz__control {
|
||||
--slider-thumb-size: 1rem;
|
||||
--slider-thumb-offset: calc(var(--slider-thumb-size) / 2);
|
||||
display: block;
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.inference-settings-viz__control > span {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
color: #334155;
|
||||
font-size: 0.86rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.inference-settings-viz__control strong {
|
||||
color: #0b72ba;
|
||||
font-family:
|
||||
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||
"Courier New", monospace;
|
||||
}
|
||||
|
||||
.inference-settings-viz__control input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
display: block;
|
||||
width: calc(100% - var(--slider-thumb-size));
|
||||
margin-left: var(--slider-thumb-offset);
|
||||
margin-right: var(--slider-thumb-offset);
|
||||
margin-top: 0.55rem;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.inference-settings-viz__control
|
||||
input[type="range"]::-webkit-slider-runnable-track {
|
||||
height: 0.68rem;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, #dbe7f2, #d4e1ec);
|
||||
}
|
||||
|
||||
.inference-settings-viz__control input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: var(--slider-thumb-size);
|
||||
height: var(--slider-thumb-size);
|
||||
margin-top: calc((0.68rem - var(--slider-thumb-size)) / 2);
|
||||
border: 1px solid #c8d6e3;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, #ffffff, #eef3f8);
|
||||
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
|
||||
}
|
||||
|
||||
.inference-settings-viz__control input[type="range"]::-moz-range-track {
|
||||
height: 0.68rem;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, #dbe7f2, #d4e1ec);
|
||||
}
|
||||
|
||||
.inference-settings-viz__control input[type="range"]::-moz-range-thumb {
|
||||
width: var(--slider-thumb-size);
|
||||
height: var(--slider-thumb-size);
|
||||
border: 1px solid #c8d6e3;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, #ffffff, #eef3f8);
|
||||
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
|
||||
}
|
||||
|
||||
.inference-settings-viz__nucleus-controls {
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.inference-settings-viz__nucleus-controls .inference-settings-viz__control {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.inference-settings-viz__segmented {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0.2rem;
|
||||
border: 1px solid #d6e2ed;
|
||||
border-radius: 10px;
|
||||
background: #f7fbff;
|
||||
}
|
||||
|
||||
.inference-settings-viz__segmented button {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #426075;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 0.84rem;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
padding: 0.5rem 0.55rem;
|
||||
}
|
||||
|
||||
.inference-settings-viz__segmented button[aria-pressed="true"] {
|
||||
border-color: #9cc5e5;
|
||||
background: #ffffff;
|
||||
color: #0f4f76;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.inference-settings-viz__threshold-panel {
|
||||
margin-bottom: 0.95rem;
|
||||
padding: 0.85rem;
|
||||
border: 1px solid #d6e2ed;
|
||||
border-radius: 12px;
|
||||
background: #f7fbff;
|
||||
}
|
||||
|
||||
.inference-settings-viz__threshold-header {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.inference-settings-viz__threshold-header strong {
|
||||
color: #0f3d58;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.inference-settings-viz__threshold-header span {
|
||||
color: #475569;
|
||||
font-size: 0.86rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.inference-settings-viz__formula-row {
|
||||
display: grid;
|
||||
grid-template-columns: max-content max-content max-content minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 0.45rem 0.6rem;
|
||||
margin-bottom: 0.75rem;
|
||||
color: #64748b;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.inference-settings-viz__formula-row code {
|
||||
color: #0f4f76;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.inference-settings-viz__cumulative-strip {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 2.35rem;
|
||||
overflow: visible;
|
||||
border: 1px solid #cbdbe8;
|
||||
border-radius: 10px;
|
||||
background: #e8f1f8;
|
||||
}
|
||||
|
||||
.inference-settings-viz__cumulative-segment {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
color: #ffffff;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.inference-settings-viz__cumulative-segment:first-child {
|
||||
border-radius: 9px 0 0 9px;
|
||||
}
|
||||
|
||||
.inference-settings-viz__cumulative-segment:nth-last-child(2) {
|
||||
border-radius: 0 9px 9px 0;
|
||||
}
|
||||
|
||||
.inference-settings-viz__cumulative-segment[data-included="false"] {
|
||||
background: #cbd5e1 !important;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.inference-settings-viz__threshold-marker {
|
||||
position: absolute;
|
||||
top: -0.42rem;
|
||||
bottom: -0.42rem;
|
||||
width: 2px;
|
||||
transform: translateX(-1px);
|
||||
background: #be123c;
|
||||
color: #be123c;
|
||||
}
|
||||
|
||||
.inference-settings-viz__threshold-marker {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.inference-settings-viz__threshold-marker::after {
|
||||
content: "P threshold";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: calc(100% + 0.18rem);
|
||||
transform: translateX(-50%);
|
||||
border: 1px solid #fecdd3;
|
||||
border-radius: 999px;
|
||||
background: #fff1f2;
|
||||
color: #9f1239;
|
||||
font-size: 0.66rem;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
padding: 0.2rem 0.34rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.inference-settings-viz__threshold-note {
|
||||
margin: 0.7rem 0 0;
|
||||
color: #475569;
|
||||
font-size: 0.84rem;
|
||||
line-height: 1.42;
|
||||
}
|
||||
|
||||
.inference-settings-viz__threshold-note strong {
|
||||
color: #0f3d58;
|
||||
}
|
||||
|
||||
.inference-settings-viz__minp-bars {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.inference-settings-viz__minp-row {
|
||||
display: grid;
|
||||
grid-template-columns: 4.35rem minmax(0, 1fr) 3.8rem;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.inference-settings-viz__minp-row > span {
|
||||
overflow: hidden;
|
||||
color: #334155;
|
||||
font-family:
|
||||
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||
"Courier New", monospace;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
text-align: right;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.inference-settings-viz__minp-row > code {
|
||||
color: #334155;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.inference-settings-viz__minp-track {
|
||||
position: relative;
|
||||
height: 1.1rem;
|
||||
border: 1px solid #d8e3ed;
|
||||
border-radius: 999px;
|
||||
background: #edf4fa;
|
||||
}
|
||||
|
||||
.inference-settings-viz__minp-fill {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.inference-settings-viz__minp-marker {
|
||||
position: absolute;
|
||||
top: -0.28rem;
|
||||
bottom: -0.28rem;
|
||||
width: 2px;
|
||||
transform: translateX(-1px);
|
||||
background: #be123c;
|
||||
}
|
||||
|
||||
.inference-settings-viz__minp-row[data-included="false"]
|
||||
.inference-settings-viz__minp-fill {
|
||||
opacity: 0.24;
|
||||
}
|
||||
|
||||
.inference-settings-viz__minp-row[data-included="false"] > span,
|
||||
.inference-settings-viz__minp-row[data-included="false"] > code {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.inference-settings-viz__bars {
|
||||
display: grid;
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.inference-settings-viz__row {
|
||||
display: grid;
|
||||
grid-template-columns: 4.35rem minmax(0, 1fr) 4.45rem;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.inference-settings-viz__token {
|
||||
overflow: hidden;
|
||||
color: #334155;
|
||||
font-family:
|
||||
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||
"Courier New", monospace;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
text-align: right;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.inference-settings-viz__bar-track {
|
||||
height: 1.4rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid #d8e3ed;
|
||||
border-radius: 6px;
|
||||
background: #edf4fa;
|
||||
}
|
||||
|
||||
.inference-settings-viz__bar-fill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
color: #ffffff;
|
||||
transition:
|
||||
opacity 0.18s ease,
|
||||
width 0.24s ease;
|
||||
}
|
||||
|
||||
.inference-settings-viz__bar-fill span {
|
||||
padding: 0 0.36rem;
|
||||
font-family:
|
||||
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||
"Courier New", monospace;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.inference-settings-viz__row[data-included="false"]
|
||||
.inference-settings-viz__bar-fill {
|
||||
opacity: 0.22;
|
||||
}
|
||||
|
||||
.inference-settings-viz__row[data-included="false"]
|
||||
.inference-settings-viz__token {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.inference-settings-viz__row-state {
|
||||
color: #64748b;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.inference-settings-viz__row[data-included="true"]
|
||||
.inference-settings-viz__row-state {
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.inference-settings-viz__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
margin-top: 0.9rem;
|
||||
}
|
||||
|
||||
.inference-settings-viz__actions button {
|
||||
border: 1px solid #bad5e8;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
color: #0f4f76;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
padding: 0.55rem 0.7rem;
|
||||
}
|
||||
|
||||
.inference-settings-viz__actions button:first-child {
|
||||
border-color: #0b72ba;
|
||||
background: #0b72ba;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.inference-settings-viz__actions button:hover {
|
||||
border-color: #0f4f76;
|
||||
}
|
||||
|
||||
.inference-settings-viz__actions span {
|
||||
color: #64748b;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.quantization-explorer {
|
||||
border: 1px solid #d7e4ef;
|
||||
border-radius: 16px;
|
||||
@@ -1920,6 +2425,23 @@ ol {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.inference-settings-viz {
|
||||
padding: 0.9rem;
|
||||
}
|
||||
|
||||
.inference-settings-viz__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.inference-settings-viz__row {
|
||||
grid-template-columns: 3.75rem minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.inference-settings-viz__row-state {
|
||||
grid-column: 2;
|
||||
margin-top: -0.22rem;
|
||||
}
|
||||
|
||||
.objective5-chat__settings {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user