import gradio as gr


with gr.Blocks(css="""
#my-img img {
    width: 70% !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#small img {
    width: 40% !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
""") as demo:
    gr.HTML("""
<div align="center">

<h1>Efficient Reasoning
<div>
<h3>Part 1:Elastic Reasoning (Scalable Chain of Thoughts via Elastic Reasoning) 🌟
</div>
<br>
</div>
    """)
    gr.HTML("""
<div style="display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;">
  <a href="https://arxiv.org/pdf/2505.05315">
    <img src="https://img.shields.io/badge/paper-A42C25?style=for-the-badge&logo=arxiv&logoColor=white" />
  </a>
  <a href="https://huggingface.co/collections/Salesforce/elastic-reasoning-682b4bba108d6ea0a8bab275">
    <img src="https://img.shields.io/badge/E1-fcd022?style=for-the-badge&logo=huggingface&logoColor=000&labelColor" />
  </a>
  <a href="https://github.com/SalesforceAIResearch/Elastic-Reasoning">
    <img src="https://img.shields.io/badge/Elastic_Reasoning-000000?style=for-the-badge&logo=github&logoColor=white" />
  </a>
</div>
    """)
    gr.Markdown(
    """

## Introduction
We propose **Elastic Reasoning**, a novel framework for scalable chain of thoughts
that explicitly separates reasoning into two phases—`thinking and solution`—with
independently allocated budgets. At test time, Elastic Reasoning prioritize that
completeness of solution segments, significantly improving reliability under tight
resource constraints. To train models that are robust to truncated thinking, we
introduce a lightweight `budget-constrained rollout` strategy, integrated into GRPO,
which teaches the model to reason adaptively when the thinking process is cut
short and generalizes effectively to unseen budget constraints without additional
training.
    """)
    gr.Image("figs/framework.png", label="Framework", show_label=False, elem_id="my-img")

    gr.Markdown(
    """
**Main Takeaways**
1. ✂️ Thinking + Solution are explicitly separated with independent budgets — boosting reliability under tight compute constraints.
2. 🧠 Budget-Constrained Rollout: We train models to handle truncated reasoning using GRPO.
3. 📈 Flexible scalability: Robust performance across diverse inference budgets on reasoning benchmarks like AIME and LiveCodeBench.
4. ⚙️ Better performance with fewer tokens: Our trained model generates outputs that are 30% shorter while maintaining (or even improving) accuracy.
    """)
    with gr.Row():
        gr.Image("figs/aime.png", label="Framework", show_label=False, elem_id="small")
        gr.Image("figs/livecode.png", label="Framework", show_label=False, elem_id="small")
    gr.Image("figs/codetable.png", label="Framework", show_label=False, elem_id="my-img")
    gr.HTML("""
<div align="center">
<div>
<h3>Part 1:Fractured Chain-of-Thought (Scalable Chain of Thoughts via Elastic Reasoning) 🌟
</div>
<br>
</div>
    """)
    gr.HTML("""
<div style="display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;">
  <a href="https://arxiv.org/pdf/2505.12992">
    <img src="https://img.shields.io/badge/paper-A42C25?style=for-the-badge&logo=arxiv&logoColor=white" />
  </a>
  <a href="https://github.com/BaohaoLiao/frac-cot">
    <img src="https://img.shields.io/badge/frac-cot-000000?style=for-the-badge&logo=github&logoColor=white" />
  </a>
</div>
    """)

    gr.Markdown(
    """

## Introduction
We propose **Elastic Reasoning**, a novel framework for scalable chain of thoughts
that explicitly separates reasoning into two phases—`thinking and solution`—with
independently allocated budgets. At test time, Elastic Reasoning prioritize that
completeness of solution segments, significantly improving reliability under tight
resource constraints. To train models that are robust to truncated thinking, we
introduce a lightweight `budget-constrained rollout` strategy, integrated into GRPO,
which teaches the model to reason adaptively when the thinking process is cut
short and generalizes effectively to unseen budget constraints without additional
training.
    """)
    gr.Image("figs/framework.png", label="Framework", show_label=False, elem_id="my-img")
    gr.Markdown(
    """
## Citation


```bibtex
@article{xu2025scalable,
  title={Scalable Chain of Thoughts via Elastic Reasoning},
  author={Xu, Yuhui and Dong, Hanze and Wang, Lei and Sahoo, Doyen and Li, Junnan and Xiong, Caiming},
  journal={arXiv preprint arXiv:2505.05315},
  year={2025}
}

@misc{liao2025fracturedchainofthoughtreasoning,
      title={Fractured Chain-of-Thought Reasoning}, 
      author={Baohao Liao and Hanze Dong and Yuhui Xu and Doyen Sahoo and Christof Monz and Junnan Li and Caiming Xiong},
      year={2025},
      eprint={2505.12992},
      archivePrefix={arXiv},
      primaryClass={cs.LG},
      url={https://arxiv.org/abs/2505.12992}, 
}
```
    """)


if __name__ == "__main__":
    demo.launch()