{% extends "base.html" %}
{% load static %}

{% block title %}What is Radiuma{% endblock %}
{% block meta_description %}Learn about Radiuma and Radiuma — Visualized & Standardized Environment for Radiomics Analysis, developed at UBC and BC Cancer Research Institute.{% endblock %}

{% block content %}

<section class="page-hero" aria-labelledby="page-hero-heading">
  <div class="page-hero-blobs" aria-hidden="true">
    <div class="blob blob--1"></div>
    <div class="blob blob--2"></div>
    <img src="{% static 'images/blob-blue-2.svg' %}" class="blob-img blob-img--page-hero" alt="" />
    <img src="{% static 'images/abstract-shapes-2.svg' %}" class="blob-img blob-img--page-corner" alt="" />
  </div>
  <div class="container">
    <div class="page-hero-content">
      <div class="section-badge">About</div>
      <h1 class="page-hero-title" id="page-hero-heading">What is Radiuma?</h1>
      <p class="page-hero-subtitle">
        Visualized &amp; Standardized Environment for Radiomics Analysis
      </p>
    </div>
  </div>
</section>

<section class="section" aria-labelledby="about-intro-heading">
  <div class="container">
    <div class="about-intro glass-card fade-in">
      <div class="about-intro-text">
        <h2 id="about-intro-heading">Desktop Software for Medical Imaging Research</h2>
        <ul class="about-list">
          <li>Desktop software to improve usability, reusability, and reproducibility in medical imaging &amp; healthcare research.</li>
          <li>Development platform to create reproducible research workflows by connecting different tools.</li>
          <li>Useful for collaborative research projects and for ensuring consistency across different studies.</li>
          <li>User-friendly for different expertise levels, including radiation oncologists, radiologists, physicists &amp; data scientists.</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<section class="section" aria-labelledby="standardization-heading">
  <div class="container">
    <div class="section-header">
      <div class="section-badge">Standards</div>
      <h2 class="section-title" id="standardization-heading">Standardization</h2>
    </div>
    <div class="standards-grid">
      <div class="standard-card glass-card fade-in">
        <div class="standard-badge">IBSI 1.0</div>
        <h3 class="standard-title">Radiomic Feature Extraction</h3>
        <p class="standard-desc">
          Radiuma is a python-based open-source package that enables standardized and
          reproducible radiomic feature extraction in compliance with the Image Biomarker
          Standardization Initiative (IBSI 1.0).
        </p>
      </div>
      <div class="standard-card glass-card fade-in">
        <div class="standard-badge">IBSI 2.0</div>
        <h3 class="standard-title">Image Filtering</h3>
        <p class="standard-desc">
          Image filters have been standardized against IBSI 2.0 by implementing and
          validating several filter options, ensuring reproducibility across research
          institutions worldwide.
        </p>
      </div>
      <div class="standard-card glass-card fade-in">
        <div class="standard-badge">Python</div>
        <h3 class="standard-title">Open Source</h3>
        <p class="standard-desc">
          Radiuma is a major, entirely-revamped upgrade to the original SERA (Matlab-based),
          now built on Python for broader accessibility and community contribution.
        </p>
      </div>
      <div class="standard-card glass-card fade-in">
        <div class="standard-badge">End-to-End</div>
        <h3 class="standard-title">Standardized Workflows</h3>
        <p class="standard-desc">
          Radiuma employs a number of popular image processing algorithms to create
          end-to-end standardized workflows for consistent, reproducible research results.
        </p>
      </div>
    </div>
  </div>
</section>

<section class="section" aria-labelledby="screenshots-about-heading">
  <div class="container">
    <div class="section-header">
      <div class="section-badge">Interface</div>
      <h2 class="section-title" id="screenshots-about-heading">Radiuma in Action</h2>
    </div>
    <div class="about-screenshots-grid">
      <div class="screenshot-item screenshot-item--featured fade-in">
        <img src="{% static 'images/screenshot-11.jpg' %}" alt="Radiuma multi-modal viewer" loading="lazy" />
      </div>
      <div class="screenshot-item fade-in">
        <img src="{% static 'images/screenshot-9.jpg' %}" alt="Radiuma settings panel" loading="lazy" />
      </div>
      <div class="screenshot-item fade-in">
        <img src="{% static 'images/screenshot-10.jpg' %}" alt="Radiuma analysis results" loading="lazy" />
      </div>
    </div>
  </div>
</section>

<section class="section" aria-labelledby="history-heading">
  <div class="container">
    <div class="history-block glass-card fade-in">
      <div class="history-content">
        <div class="section-badge">History</div>
        <h2 id="history-heading">Our Origins</h2>
        <p>
          Radiuma has been developing since 2021 by the
          Quantitative Radiomolecular Imaging and Therapy (Qurit) lab &amp; program at the
          University of British Columbia &amp; BC Cancer Research Institute, Vancouver, BC, Canada.
        </p>
        <p>
          Radiuma's mission is to bridge the gap between cutting-edge radiomics research and
          practical clinical application by providing standardized, reproducible, and
          user-friendly software tools.
        </p>
        <div class="history-links">
          <a href="https://www.qurit.ca" class="btn-ghost" target="_blank" rel="noopener noreferrer">Qurit Lab</a>
          <a href="https://www.ubc.ca" class="btn-ghost" target="_blank" rel="noopener noreferrer">UBC</a>
          <a href="https://www.bccrc.ca" class="btn-ghost" target="_blank" rel="noopener noreferrer">BC Cancer</a>
        </div>
      </div>
      <div class="history-visual" aria-hidden="true">
        <div class="history-blob history-blob--1"></div>
        <div class="history-blob history-blob--2"></div>
        <div class="history-year">2021</div>
      </div>
    </div>
  </div>
</section>

{% endblock %}