SupraLabs/reasoning-summarizer-800m-pre-gguf overview

---

license: apache-2.0

base_model:

• SupraLabs/reasoning-summarizer-800m-pre

library_name: transformers

pipeline_tag: text-generation

tags:

• qwen3.5
• reasoning
• json
• sft
• JSON-schema
• thinking
• reasoning-summaries
• CoT
• agentic-coding
• qwen35
• qwen3next
• math
• code

datasets:

• SupraLabs/reasoning-summaries-61k

language:

• en

---

<h1 align="center">Reasoning Summarizer 0.8B</h1>

!Reasoning Summaries 61K

<div style="font-family:Poppins,Arial,Helvetica,sans-serif;border:1px solid #d4d4ce;background:#f5f5f3;border-left:4px solid #8f8b83;border-radius:3px;padding:14px 16px;margin:18px 0;color:#3f3f3c;box-shadow:0 2px 0 rgba(0,0,0,.12),0 12px 28px rgba(0,0,0,.045);box-sizing:border-box;">

<p style="margin:0;font-size:13px;line-height:1.62;color:#484844;">

<span style="font-weight:700;color:#44443f;">Weight guidance:</span>

<span style="font-weight:700;color:#343431;">Q8_0</span> is recommended for the highest output stability.

Use <span style="font-weight:700;color:#343431;">Q6_K</span> where possible as the best practical default.

Choose <span style="font-weight:700;color:#343431;">Q5</span> for lower-resource environments.

<span style="color:#666660;">Q4 builds are supported, but are less ideal for this model size when structured JSON reliability matters.</span>

</p>

</div>

We fine-tuned this model to take a reasoning chain as plain text and output structured JSON metadata.

The goal is:

reasoning chain in -> JSON metadata out

No system prompt was used. The expected input is just the reasoning chain text, normally followed by a newline.

Output Format

{
  "title": "...",
  "sub_title": "...",
  "summary": "...",
  "cur_task": "..."
}

<div style="font-family:Arial,Helvetica,sans-serif;max-width:1080px;margin:28px auto;color:#3b3b38;background:#fff;box-sizing:border-box;">

<div style="border:1px solid #dddddd;background:#f7f7f6;border-radius:5px;padding:14px;margin-bottom:18px;box-shadow:0 2px 0 rgba(0,0,0,.10),0 10px 24px rgba(0,0,0,.035);box-sizing:border-box;">

<p style="margin:0 0 10px 0;font-size:13px;color:#696966;">Reasoning Chain</p>

<p style="margin:0;background:#fff;border:1px solid #dedede;border-radius:4px;min-height:360px;padding:16px 18px;font-size:13px;line-height:1.75;color:#3f3f3c;box-shadow:inset 0 1px 2px rgba(0,0,0,.035);box-sizing:border-box;overflow-wrap:break-word;word-break:normal;overflow:hidden;">

I am investigating a React theme initialization issue in a production build. The app appears to default to light mode during the first render, then switches to dark mode only after localStorage is read. This creates a visible white flash before the saved theme preference is applied. I need to understand whether this is caused by the default React state, the hydration order, the timing of the localStorage effect, or the way the theme class is written to the DOM.

<br><br>

First, I should inspect the app entry point and check whether any synchronous theme bootstrap exists before React mounts. If the saved theme is only read inside a useEffect, then the browser will paint the initial light UI before the effect runs. That would explain why the app briefly appears in the wrong theme. I should also check whether the theme provider initializes with a hardcoded light value, a system preference, or a value derived from localStorage.

<br><br>

Next, I need to inspect how the theme is applied. If the implementation replaces classes on document.body, that can be risky because the body may already contain layout, accessibility, or framework classes. A cleaner approach is likely to use document.documentElement with a data-theme attribute, such as data-theme="dark" or data-theme="light". That makes the theme state easier to target from CSS and reduces the chance of accidentally removing unrelated classes.

<br><br>

I also need to review the settings page because the selected theme may not be clearly represented. The visual state might be obvious to sighted users, but keyboard users and screen readers need proper semantics. I should check whether the controls expose selected or pressed state, whether focus indicators are visible, and whether the component being used is actually a button or just a clickable card. If DashboardCard is used as an interactive control, it should behave like a real control.

<br><br>

The dashboard card implementation may also be involved. Reusable cards sometimes hide accessibility issues because they look interactive but do not expose the correct behavior. I should inspect whether active state, hover state, focus state, and disabled state are handled consistently. I should avoid redesigning the entire settings page unless the current structure is directly causing the theme bug.

<br><br>

The likely fix is to apply the saved theme before first paint, keep the DOM update scoped to documentElement, and make the settings UI reflect the selected state clearly. The final summary should preserve the important reasoning without becoming too long. It should explain that the theme initializes too late, that body class replacement may be unsafe, that a pre-render bootstrap or documentElement dataset is safer, and that accessibility should be checked in the theme controls.

</p>

</div>

<div style="border:1px solid #dddddd;background:#f7f7f6;border-radius:5px;padding:14px;margin-bottom:18px;box-shadow:0 2px 0 rgba(0,0,0,.10),0 10px 24px rgba(0,0,0,.035);box-sizing:border-box;">

<div style="display:flex;justify-content:space-between;gap:12px;margin-bottom:14px;align-items:center;">

<p style="margin:0;font-size:14px;font-weight:700;color:#5a5a56;">Q4_K_M</p>

<p style="margin:0;font-size:12px;color:#777772;">529.30 MB · 4.51s</p>

</div>

<div style="display:grid;grid-template-columns:330px 1fr;gap:18px;box-sizing:border-box;">

<div style="box-sizing:border-box;min-width:0;">

<p style="margin:0 0 6px 0;font-size:13px;color:#666663;">Title</p>

<p style="margin:0 0 12px 0;background:#fff;border:1px solid #dedede;border-radius:4px;height:54px;padding:10px 11px;font-size:13px;line-height:1.5;color:#3d3d3a;box-shadow:inset 0 1px 2px rgba(0,0,0,.035);box-sizing:border-box;overflow-wrap:break-word;overflow:hidden;">React Theme Initialization</p>

<p style="margin:0 0 6px 0;font-size:13px;color:#666663;">Sub-title</p>

<p style="margin:0 0 12px 0;background:#fff;border:1px solid #dedede;border-radius:4px;height:64px;padding:10px 11px;font-size:13px;line-height:1.45;color:#3d3d3a;box-shadow:inset 0 1px 2px rgba(0,0,0,.035);box-sizing:border-box;overflow-wrap:break-word;overflow:hidden;">Analyzing theme initialization, hydration, and accessibility considerations in the React app.</p>

<p style="margin:0 0 6px 0;font-size:13px;color:#666663;">Current Task</p>

<p style="margin:0;background:#fff;border:1px solid #dedede;border-radius:4px;height:78px;padding:10px 11px;font-size:13px;line-height:1.45;color:#3d3d3a;box-shadow:inset 0 1px 2px rgba(0,0,0,.035);box-sizing:border-box;overflow-wrap:break-word;overflow:hidden;">I'm reviewing the React app's theme initialization and accessibility requirements to ensure a responsive and accessible experience.</p>

</div>

<div style="box-sizing:border-box;min-width:0;">

<p style="margin:0 0 6px 0;font-size:13px;color:#666663;">Summary</p>

<p style="margin:0;background:#fff;border:1px solid #dedede;border-radius:4px;height:238px;padding:12px 13px;font-size:13px;line-height:1.65;color:#3d3d3a;box-shadow:inset 0 1px 2px rgba(0,0,0,.035);box-sizing:border-box;overflow-wrap:break-word;word-break:normal;overflow:hidden;">I reviewed the React app's theme behavior, noting that it defaults to light and only switches on localStorage. I considered synchronous initialization and the need for a bootstrap, and examined the settings page to understand the current layout and accessibility needs.</p>

</div>

</div>

</div>

<div style="border:1px solid #dddddd;background:#f7f7f6;border-radius:5px;padding:14px;margin-bottom:18px;box-shadow:0 2px 0 rgba(0,0,0,.10),0 10px 24px rgba(0,0,0,.035);box-sizing:border-box;">

<div style="display:flex;justify-content:space-between;gap:12px;margin-bottom:14px;align-items:center;">

<p style="margin:0;font-size:14px;font-weight:700;color:#5a5a56;">Q6_K</p>

<p style="margin:0;font-size:12px;color:#777772;">629.74 MB · 5.10s</p>

</div>

<div style="display:grid;grid-template-columns:330px 1fr;gap:18px;box-sizing:border-box;">

<div style="box-sizing:border-box;min-width:0;">

<p style="margin:0 0 6px 0;font-size:13px;color:#666663;">Title</p>

<p style="margin:0 0 12px 0;background:#fff;border:1px solid #dedede;border-radius:4px;height:54px;padding:10px 11px;font-size:13px;line-height:1.5;color:#3d3d3a;box-shadow:inset 0 1px 2px rgba(0,0,0,.035);box-sizing:border-box;overflow-wrap:break-word;overflow:hidden;">Theme Initialization Analysis</p>

<p style="margin:0 0 6px 0;font-size:13px;color:#666663;">Sub-title</p>

<p style="margin:0 0 12px 0;background:#fff;border:1px solid #dedede;border-radius:4px;height:64px;padding:10px 11px;font-size:13px;line-height:1.45;color:#3d3d3a;box-shadow:inset 0 1px 2px rgba(0,0,0,.035);box-sizing:border-box;overflow-wrap:break-word;overflow:hidden;">Analyzing theme initialization flow, hydration behavior, and accessibility considerations.</p>

<p style="margin:0 0 6px 0;font-size:13px;color:#666663;">Current Task</p>

<p style="margin:0;background:#fff;border:1px solid #dedede;border-radius:4px;height:78px;padding:10px 11px;font-size:13px;line-height:1.45;color:#3d3d3a;box-shadow:inset 0 1px 2px rgba(0,0,0,.035);box-sizing:border-box;overflow-wrap:break-word;overflow:hidden;">I'm examining the theme initialization logic and accessibility requirements to improve the current implementation.</p>

</div>

<div style="box-sizing:border-box;min-width:0;">

<p style="margin:0 0 6px 0;font-size:13px;color:#666663;">Summary</p>

<p style="margin:0;background:#fff;border:1px solid #dedede;border-radius:4px;height:238px;padding:12px 13px;font-size:13px;line-height:1.65;color:#3d3d3a;box-shadow:inset 0 1px 2px rgba(0,0,0,.035);box-sizing:border-box;overflow-wrap:break-word;word-break:normal;overflow:hidden;">I reviewed the theme initialization sequence, noting that light is applied first and then switched to dark after hydration. I identified that the current approach lacks synchronous initialization and that body class replacement is unsafe. I also considered using documentElement dataset for safer theme handling and explored accessibility and dashboard card inspection.</p>

</div>

</div>

</div>

<div style="border:1px solid #dddddd;background:#f7f7f6;border-radius:5px;padding:14px;margin-bottom:18px;box-shadow:0 2px 0 rgba(0,0,0,.10),0 10px 24px rgba(0,0,0,.035);box-sizing:border-box;">

<div style="display:flex;justify-content:space-between;gap:12px;margin-bottom:14px;align-items:center;">

<p style="margin:0;font-size:14px;font-weight:700;color:#5a5a56;">Q8_0</p>

<p style="margin:0;font-size:12px;color:#777772;">811.84 MB · 4.00s</p>

</div>

<div style="display:grid;grid-template-columns:330px 1fr;gap:18px;box-sizing:border-box;">

<div style="box-sizing:border-box;min-width:0;">

<p style="margin:0 0 6px 0;font-size:13px;color:#666663;">Title</p>

<p style="margin:0 0 12px 0;background:#fff;border:1px solid #dedede;border-radius:4px;height:54px;padding:10px 11px;font-size:13px;line-height:1.5;color:#3d3d3a;box-shadow:inset 0 1px 2px rgba(0,0,0,.035);box-sizing:border-box;overflow-wrap:break-word;overflow:hidden;">Theme Initialization Analysis</p>

<p style="margin:0 0 6px 0;font-size:13px;color:#666663;">Sub-title</p>

<p style="margin:0 0 12px 0;background:#fff;border:1px solid #dedede;border-radius:4px;height:64px;padding:10px 11px;font-size:13px;line-height:1.45;color:#3d3d3a;box-shadow:inset 0 1px 2px rgba(0,0,0,.035);box-sizing:border-box;overflow-wrap:break-word;overflow:hidden;">Reviewing theme initialization flow, hydration behavior, and accessibility considerations.</p>

<p style="margin:0 0 6px 0;font-size:13px;color:#666663;">Current Task</p>

<p style="margin:0;background:#fff;border:1px solid #dedede;border-radius:4px;height:78px;padding:10px 11px;font-size:13px;line-height:1.45;color:#3d3d3a;box-shadow:inset 0 1px 2px rgba(0,0,0,.035);box-sizing:border-box;overflow-wrap:break-word;overflow:hidden;">I'm reviewing the theme initialization logic and accessibility requirements to ensure a smooth and accessible user experience.</p>

</div>

<div style="box-sizing:border-box;min-width:0;">

<p style="margin:0 0 6px 0;font-size:13px;color:#666663;">Summary</p>

<p style="margin:0;background:#fff;border:1px solid #dedede;border-radius:4px;height:238px;padding:12px 13px;font-size:13px;line-height:1.65;color:#3d3d3a;box-shadow:inset 0 1px 2px rgba(0,0,0,.035);box-sizing:border-box;overflow-wrap:break-word;word-break:normal;overflow:hidden;">I examined the theme initialization sequence, noting that light is set first and then switched to dark on reload. I considered the need for synchronous initialization and the importance of using documentElement for safer class replacement. I also reviewed the settings page and dashboard card to understand accessibility and UI requirements.</p>

</div>

</div>

</div>

</div>

Breakdown

• title: title of the reasoning chain/section
• sub_title: subtitle of the reasoning chain/section
• summary: an informative but short overview of the reasoning chain/section
• cur_task: the current task the model is carrying out, generated in an extremely short (1 liner) text for agentic workflows

Example

Input:

{tool_assistant: [read_file: src/context/ThemeContext.tsx]}

{tool_result:
Theme initializes to light.
Later useEffect reads localStorage.
Second effect writes theme and updates body class.
}

Theme defaults to light before reading saved value.

That explains the white flash.

On reload, app renders light first, then switches to dark after hydration.

Need synchronous initialization.

Also body.className replaces all body classes.
Safer to use documentElement dataset.

Need to inspect main.tsx.

{tool_assistant: [read_file: src/main.tsx]}

{tool_result:
React root renders App immediately.
No theme bootstrap.
}

No pre-render theme initialization.

Need bootstrap.

Inspect settings page.

{tool_assistant: [read_file: src/pages/Settings.tsx]}

{tool_result:
Two buttons.
Current theme text.
Minimal layout.
}

Settings works but UX is extremely basic.

Need active state.

Need accessibility.

Need to inspect DashboardCard.

{tool_assistant: [read_file: src/components/DashboardCard.tsx]}

{tool_result:
Card uses hardcoded "card" class.
}

Inspect global styles.

{tool_assistant: [read_file: src/styles/global.css]}

{tool_result:
body.light
body.dark

.card {
background: white;
}
}

There it is.

Cards are permanently white.

Dark mode only changes body.

Cards never receive dark styling.

Need CSS variables instead.

Output:

{"title":"Theme Initialization Analysis",
"sub_title":"Investigating theme behavior, hydration, and accessibility issues in the React app.",
"summary":"I reviewed the theme initialization logic, noting that the app defaults to light and only switches to dark on reload. I examined the main rendering flow, identified missing pre-initialization, and found the body class replacement causing inconsistent styling. I also checked the settings page and dashboard card to understand the current implementation and identified the need for CSS variables and accessibility improvements.",
"cur_task":"I'm inspecting the React code to understand the theme initialization and styling behavior, focusing on hydration, class replacement, and accessibility."}

Included Files

This repo includes the merged model for inference and the LoRA adapters for people who want to continue SFT, RL, or other experiments.

model.safetensors
config.json
generation_config.json
tokenizer.json
tokenizer_config.json
chat_template.jinja
training_metadata.json
adapters/final_adapter/adapter_model.safetensors
adapters/final_adapter/adapter_config.json
adapters/best_adapter/adapter_model.safetensors
adapters/best_adapter/adapter_config.json
training/training_args.json
training/trainer_state.json

Training Details

• Base model: Qwen/Qwen3.5-0.8B-Base
• Method: LoRA SFT
• LoRA rank: 32
• LoRA alpha: 64
• Context length: 4096
• Loss masking: trained only on the assistant JSON output
• Prompt format: raw reasoning chain text
• System prompt: none
• Final eval loss: 0.7920386046171188

Inference

import json
import torch
from transformers import AutoModelForCausalLM, AutoTokenizer

model_id = "SupraLabs/reasoning-summarizer-800m-pre-gguf"

tokenizer = AutoTokenizer.from_pretrained(model_id, trust_remote_code=True)
model = AutoModelForCausalLM.from_pretrained(
    model_id,
    torch_dtype=torch.float16,
    device_map="auto",
    trust_remote_code=True,
)

reasoning = "The user asks why their API returns 401. I should check auth headers and token expiry."
inputs = tokenizer(reasoning + "\n", return_tensors="pt").to(model.device)

with torch.no_grad():
    output = model.generate(
        **inputs,
        max_new_tokens=160,
        do_sample=False,
        pad_token_id=tokenizer.eos_token_id,
        eos_token_id=tokenizer.eos_token_id,
    )

text = tokenizer.decode(output[0][inputs["input_ids"].shape[1]:], skip_special_tokens=True)
print(json.loads(text))

Continuing SFT Or RL

Use the merged checkpoint as the base model if you want to train directly from the fine-tuned model.

Use adapters/final_adapter if you want to continue from the final LoRA adapter. Use adapters/best_adapter if you want to continue from the best validation checkpoint.

For RL, useful reward checks are:

• valid JSON
• exactly these keys: title, sub_title, summary, cur_task
• no text outside the JSON object
• concise title
• faithful summary of the reasoning chain

Notes

This is a small specialized model. It is meant for reasoning-chain metadata extraction, not general chat.

The base model license and usage terms from Qwen/Qwen3.5-0.8B-Base still apply.