Spaces:

Phoenixak99
/

RAG-System-Demo

Sleeping

v2: cited answers with hybrid retrieval + cross-encoder rerank, Qwen3-1.7B on CPU, retrieval trace

a072368 verified 2 days ago

4.1 kB

/* paper & ink, matching ahmed.fynxforge.com */
:root, .dark {
    --paper: #F4F1EA; --card: #FFFDF8; --ink: #141310; --mute: #6B665C; --line: #DAD4C7; --accent: #C2341B;
    --body-background-fill: var(--paper); --background-fill-primary: var(--card); --background-fill-secondary: var(--paper);
    --block-background-fill: var(--card); --block-border-color: var(--line); --body-text-color: var(--ink);
    --input-background-fill: var(--card); --border-color-primary: var(--line);
    --button-primary-background-fill: var(--ink); --button-primary-background-fill-hover: var(--accent);
    --button-primary-text-color: var(--paper); --color-accent: var(--accent); --link-text-color: var(--accent);
}
gradio-app, .gradio-container { background: var(--paper) !important; color: var(--ink); }
.gradio-container { max-width: 1180px !important; width: 100% !important; margin: 0 auto !important; font-family: Inter, system-ui, sans-serif; }
.gradio-container .label-wrap span, .gradio-container label span, .gradio-container .block-label, .gradio-container .examples-label, .gradio-container [data-testid="block-label"] { color: var(--mute) !important; opacity: 1 !important; }
.gradio-container .gallery-item, .gradio-container button.example { background: var(--card) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; }
.gradio-container .gallery-item:hover, .gradio-container button.example:hover { border-color: var(--ink) !important; }
.hd { padding: 18px 0 6px; border-bottom: 1px solid var(--ink); margin-bottom: 10px; }
.hd h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 600; font-size: 40px; margin: 4px 0 8px; color: var(--ink); }
.kicker, .sec, .ft, .muted, .trace th { font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace; }
.kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: 0; }
.lede { max-width: 820px; color: #3A372F; line-height: 1.55; margin: 0 0 8px; }
.links a { color: var(--accent); margin-right: 18px; text-decoration: none; font-size: 14px; }
.answer { font-size: 18px; line-height: 1.6; color: var(--ink); padding: 14px 16px; background: var(--card); border: 1px solid var(--ink); border-radius: 3px; }
.cite { display: inline-block; min-width: 16px; padding: 1px 4px; margin: 0 1px; border-radius: 2px; background: var(--accent); color: #FBEFE9; font: 600 11px/1.3 ui-monospace, monospace; text-align: center; vertical-align: 3px; }
.sources { list-style: none; padding: 0; margin: 10px 0 0; font-size: 14px; color: var(--mute); }
.sources li { padding: 3px 0; }
.muted { color: var(--mute); font-size: 13px; }
.sec { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: 18px 0 4px; font-weight: 500; }
.trace { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--card); }
.trace th { text-align: left; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); padding: 8px; border-bottom: 1px solid var(--ink); }
.trace td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.trace td.c { text-align: center; font-family: ui-monospace, monospace; }
.trace td.n { font-family: ui-monospace, monospace; color: var(--accent); font-weight: 600; }
.snip { color: #4A463F; font-size: 13px; margin-top: 4px; max-width: 520px; }
.bar { width: 120px; height: 6px; background: #ECE7DC; border-radius: 3px; overflow: hidden; margin: 6px 0 4px; }
.bar i { display: block; height: 100%; background: var(--accent); }
.up { color: #2E7D4F; font-weight: 600; } .down { color: var(--mute); } .same { color: var(--mute); }
.ft { font-size: 12px; color: var(--mute); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 18px; }
@media (max-width: 720px) {
    .trace td:nth-child(5), .trace th:nth-child(5) { display: none; } .snip { display: none; } .trace td:nth-child(3), .trace td:nth-child(4), .trace th:nth-child(3), .trace th:nth-child(4) { display: none; } .hd h1 { font-size: 30px; } }
.try { margin: 6px 0 -4px; }

	/* paper & ink, matching ahmed.fynxforge.com */
	:root, .dark {
	--paper: #F4F1EA; --card: #FFFDF8; --ink: #141310; --mute: #6B665C; --line: #DAD4C7; --accent: #C2341B;
	--body-background-fill: var(--paper); --background-fill-primary: var(--card); --background-fill-secondary: var(--paper);
	--block-background-fill: var(--card); --block-border-color: var(--line); --body-text-color: var(--ink);
	--input-background-fill: var(--card); --border-color-primary: var(--line);
	--button-primary-background-fill: var(--ink); --button-primary-background-fill-hover: var(--accent);
	--button-primary-text-color: var(--paper); --color-accent: var(--accent); --link-text-color: var(--accent);
	}
	gradio-app, .gradio-container { background: var(--paper) !important; color: var(--ink); }
	.gradio-container { max-width: 1180px !important; width: 100% !important; margin: 0 auto !important; font-family: Inter, system-ui, sans-serif; }
	.gradio-container .label-wrap span, .gradio-container label span, .gradio-container .block-label, .gradio-container .examples-label, .gradio-container [data-testid="block-label"] { color: var(--mute) !important; opacity: 1 !important; }
	.gradio-container .gallery-item, .gradio-container button.example { background: var(--card) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; }
	.gradio-container .gallery-item:hover, .gradio-container button.example:hover { border-color: var(--ink) !important; }
	.hd { padding: 18px 0 6px; border-bottom: 1px solid var(--ink); margin-bottom: 10px; }
	.hd h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 600; font-size: 40px; margin: 4px 0 8px; color: var(--ink); }
	.kicker, .sec, .ft, .muted, .trace th { font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace; }
	.kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: 0; }
	.lede { max-width: 820px; color: #3A372F; line-height: 1.55; margin: 0 0 8px; }
	.links a { color: var(--accent); margin-right: 18px; text-decoration: none; font-size: 14px; }
	.answer { font-size: 18px; line-height: 1.6; color: var(--ink); padding: 14px 16px; background: var(--card); border: 1px solid var(--ink); border-radius: 3px; }
	.cite { display: inline-block; min-width: 16px; padding: 1px 4px; margin: 0 1px; border-radius: 2px; background: var(--accent); color: #FBEFE9; font: 600 11px/1.3 ui-monospace, monospace; text-align: center; vertical-align: 3px; }
	.sources { list-style: none; padding: 0; margin: 10px 0 0; font-size: 14px; color: var(--mute); }
	.sources li { padding: 3px 0; }
	.muted { color: var(--mute); font-size: 13px; }
	.sec { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: 18px 0 4px; font-weight: 500; }
	.trace { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--card); }
	.trace th { text-align: left; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); padding: 8px; border-bottom: 1px solid var(--ink); }
	.trace td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
	.trace td.c { text-align: center; font-family: ui-monospace, monospace; }
	.trace td.n { font-family: ui-monospace, monospace; color: var(--accent); font-weight: 600; }
	.snip { color: #4A463F; font-size: 13px; margin-top: 4px; max-width: 520px; }
	.bar { width: 120px; height: 6px; background: #ECE7DC; border-radius: 3px; overflow: hidden; margin: 6px 0 4px; }
	.bar i { display: block; height: 100%; background: var(--accent); }
	.up { color: #2E7D4F; font-weight: 600; } .down { color: var(--mute); } .same { color: var(--mute); }
	.ft { font-size: 12px; color: var(--mute); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 18px; }
	@media (max-width: 720px) {
	.trace td:nth-child(5), .trace th:nth-child(5) { display: none; } .snip { display: none; } .trace td:nth-child(3), .trace td:nth-child(4), .trace th:nth-child(3), .trace th:nth-child(4) { display: none; } .hd h1 { font-size: 30px; } }
	.try { margin: 6px 0 -4px; }