oss/salience-editor
oss/salience-editor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: tweak styles for mobile

Browse source
This commit is contained in:
nobody 2025-11-29 15:17:43 -08:00
commit 64e176dab5
Signed by: GrocerPublishAgent
GPG key ID: D460CD54A9E3AB86
5 changed files with 111 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

50
frontend/src/components/breadcrumb/breadcrumb.tsx Normal file
View file

@ -0,0 +1,50 @@
import { component$ } from "@builder.io/qwik";
interface BreadcrumbProps {
current: string;
}
export const Breadcrumb = component$<BreadcrumbProps>(({ current }) => {
return (
<nav
class="-mx-2.5 b-3 border-black"
style={{
marginBottom: "10px",
padding: "10px",
borderRadius: "4px",
display: "flex",
alignItems: "center",
gap: "8px",
fontSize: "14px",
}}
>
<a
href="/"
class="no-underline hover:underline"
style={{
color: "#0066cc",
display: "flex",
alignItems: "center",
}}
>
Demo
</a>
<span style={{ color: "#999", display: "flex", alignItems: "center" }}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</span>
<span style={{ color: "#666" }}>{current}</span>
</nav>
);
});

4
frontend/src/components/debug-panel/debug-panel.tsx
View file

@ -119,14 +119,14 @@ export const DebugPanel = component$<DebugPanelProps>(
{/* Debug panel */}
{isOpen.value && (
<div class="fixed top-0 right-0 bottom-0 w-[500px] bg-white border-l border-gray-300 shadow-lg flex flex-col z-[999]">
<div class="fixed top-0 right-0 bottom-0 w-full max-w-[500px] bg-white border-l border-gray-300 shadow-lg flex flex-col z-[999]">
<h2 class="m-0 px-5 py-4 text-lg border-b border-gray-200 bg-gray-50">
Debug: Salience Score Breakdown
</h2>
{/* Controls */}
<div class="px-5 py-3 border-b border-gray-200 bg-gray-50">
<div class="flex gap-4 items-center text-xs mb-2">
<div class="flex flex-wrap gap-4 items-center text-xs mb-2">
<div class="flex items-center gap-2">
<label class="text-gray-700 font-semibold">Exponent:</label>
<input

20
frontend/src/global.css
View file

@ -23,20 +23,20 @@ h1 .subtitle {
font-weight: normal;
color: #a0a0a0;
}
h1 .about-link {
.about-link {
display: block;
font-size: 0.6em;
font-weight: normal;
color: #1565c0;
text-decoration: none;
margin-top: 8px;
}
h1 .about-link:hover {
.about-link:hover {
text-decoration: underline;
}
.controls {
margin: 15px 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
@ -106,3 +106,17 @@ h1 .about-link:hover {
display: inline-block;
vertical-align: middle;
}
/* Mobile styles */
@media (max-width: 640px) {
.container {
padding: 15px 0;
}
.container > *:not(.editor) {
padding-left: 15px;
padding-right: 15px;
}
.editor {
box-shadow: none;
}
}

52
frontend/src/routes/about/index.mdx
View file

@ -3,6 +3,9 @@ title: How Salience Works
---
import { Math } from "~/components/math/math"
import { Breadcrumb } from "~/components/breadcrumb/breadcrumb"
<a href="../" class="about-link">← Back to Demo</a>
# How Salience Works
@ -12,22 +15,49 @@ was quite neat how someone well armed with math can take sentence embeddings
and determine the significance of all sentences in a document in fewer lines of
code than my introduction paragraph here.
This is not a description of [all the changes I made and extra book-keeping involved to turn Matt's script into a proper web app demo](/grunt-work).
Salience highlights important sentences by treating your document as a graph
where sentences that talk about similar things are connected. We then figure
out which sentences are most "central" to the document's themes.
This post is an outsider's view of how Matt's salience code works. If you're
already working with ML models in Python, this will feel torturously detailed.
**This is not** a description of [all the changes I made and extra book-keeping
involved to turn Matt's script into a proper web app demo](./grunt-work).
My interest in this overly detailed style is, the equations a ML engineer would doodle out, the element by element matrix operations to give you feel for the dataflow, and the numpy code that implements it.
Warning! This post is an outsider's view of how Matt's salience code works. If
you're already working with ML models in Python, this will feel torturously
detailed.
When you see `sims /= norms.T` in numpy, I want to explain the matrix dimensions
I'm thinking that for someone fluent in this stuff, they see a lot more than
just Matt's few dozen lines of code. They'll see the underlying equation, the
shape of the matrices, how the data is laid out in memory, and **crucially**
the alternatives. They see this is a graph problem. And then they're flipping
through a mental catalog: random walks, spectral decomposition, diffusion,
flow-based methods. Asking which one applies, what assumptions each makes, and
whether the data is close enough to satisfy them. If not, maybe you
aproximate, linearize, symmetrize, or threshold until it does. Knowing the
toolkit and knowing when to bend the rules All of this is available to them
effortlessly, automatically, without conscious thought.
I remember when I first learned Haskell. Reading the code was slow! I had to
think quite a bit about what I was looking at. Then after about month,
something clicked. I could suddenly read Haskell like English or C++. The
translation became effortless, almost invisible.
I wrote this for the rest of us old world programmers: compilers, networking, systems programming looking at
C++/Go/Rust, or the poor souls in the frontend Typescript mines.
For us refugees of the barbarian past, the tooling and notation can look foreign. I wanted to walk through the math and
numpy operations in detail to show what's actually happening with the data.
I would bet my last donut the same thing can happen to you with numpy and and
ML papers. At some point, fluency kicks in. You will read the equations an ML
engineer would doodle out, intinctively have a feel for the dataflow, the
element by element matrix operations under the hood, while simultaneously
seeing in your mind's eye the equivalent high level numpy code.
Salience highlights important sentences by treating your document as a graph where sentences that talk about similar things are connected. We then figure out which sentences are most "central" to the document's themes.
Today I'm going to show you the equation, the matching source code, and the
alternative theorem/algorithms/tricks you could have deployed at each step.
I'll explain things that will seem painfully obvious to experts: *this is a
matrix multiplication—how many rows? how many columns? what's the shape of the
output?* That level of detail.
I'm essentially narrating the day-jobbers' automatic, subconscious
processes. I hope laying out all the alternate forms (showing the choices, the
reasons, the mental links between code and math) brings you one step closer to
fluency.
## Step 1: Break Text into Sentences
@ -265,4 +295,4 @@ For each document, I use a simple 1D solver to find <Math tex="p" /> and <Math t
---
[← Back to App](/)
<a href="../" class="about-link">← Back to Demo</a>

2
frontend/src/routes/index.tsx
View file

@ -319,8 +319,8 @@ export default component$(() => {
<span class="subtitle">
sentence highlights based on their significance to the document
</span>
<a href="./about" class="about-link">How it works →</a>
</h1>
<a href="./about" class="about-link text-sm">How it works →</a>
<div class="controls">
<label for="model-select">Model:</label>
<select