expstar/index.html at main · osipyaan/expstar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>STARLING - explained for students, new to computational biology</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: #f8fafc;
            color: #1e293b;
        }
        /* Sticky top nav bar */
        nav {
            background-color: #1a73e8;
            padding: 10px 20px;
            position: sticky;
            top: 0;
            z-index: 1000;
            text-align: left;
        }
        nav a {
            color: white;
            text-decoration: none;
            margin-right: 20px;
            font-weight: bold;
        }
        nav a:hover {
            text-decoration: underline;
        }
        header {
            background-color: #0f172a;
            color: white;
            padding: 1rem 2rem;
            text-align: center;
        }
        main {
            max-width: 900px;
            margin: 2rem auto;
            padding: 0 1rem;
        }
        section {
            background: white;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        }
        h2 {
            color: #0f172a;
        }
        footer {
            text-align: center;
            background-color: #0f172a;
            color: #94a3b8;
            padding: 1rem;
            font-size: 0.9rem;
        }
        .highlight {
            background-color: #fef9c3;
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
        }
    </style>
</head>
<body>

<!-- Sticky Navigation Bar -->
<nav>
    <a href="https://osipyaan.github.io/expstar">Home</a>
    <a href="https://osipyaan.github.io/expstar/pipeline">Example Pipeline</a>
    <a href="https://colab.research.google.com/drive/14Gk-lnKaCmIEjq99w7kB7DJDBJYTkO3R?usp=sharing" target="_blank">Tutorial Colab Notebook</a>
    <a href="https://github.com/camlab-bioml/starling" target="_blank">STARLING on GitHub</a>
</nav>

<header>
    <h1>STARLING: Making Spatial Biology Clear</h1>
    <img src="logo.png" alt="Logo" width="100" height="100" />
    <p>Understanding complex cell data — without the headaches.</p>
</header>

<main>
    <section id="what-is">
        <h2>What is STARLING?</h2>
        <p>
            <span class="highlight">STARLING</span> is a computer program that helps scientists make sense of
            <strong>spatial single-cell data:</strong> information about where individual cells are located and what molecules they contain.
        </p>
        <p>
            Imagine looking at a detailed city map where every house is a cell, and you also know what's inside each house.
            STARLING helps group similar "houses" together into neighborhoods, but it also accounts for mistakes in the map,
            like blurry photos or mislabelled streets.
        </p>
    </section>

    <section id="why">
        <h2>Why Use STARLING?</h2>
        <ul>
            <li><strong>Cleaner results</strong> – It detects and corrects for errors caused by cell segmentation mistakes.</li>
            <li><strong>Better grouping</strong> – Finds clusters of cells that actually make sense biologically.</li>
            <li><strong>Works with real-world data</strong> – Can handle noisy or imperfect experimental data.</li>
        </ul>
    </section>

    <section id="how">
        <h2>Sample Pipeline</h2>
        <ol>
            <li><strong>Input:</strong> Data about each cell’s location and molecular markers.</li>
            <li><strong>Probabilistic modeling:</strong> Uses statistics to guess which measurements are real and which might be errors.</li>
            <li><strong>Clustering:</strong> Groups cells into meaningful types or "neighborhoods."</li>
            <li><strong>Output:</strong> A cleaned-up map of cells that better reflects reality.</li>
        </ol>
    </section>

    <section id="learn-more">
        <h2>Read the Papers</h2>
        <p>
            Want to dive deeper? Check out:
        </p>
        <ul>
            <li><a href="https://www.nature.com/articles/s41467-024-55214-w" target="_blank">STARLING Paper (Nature)</a></li>
            <li><a href="https://github.com/camlab-bioml/starling" target="_blank">STARLING GitHub repository</a></li>
        </ul>
    </section>
</main>

<footer>
    &copy; 2025 STARLING Education Page – Designed for students learning spatial biology.
</footer>

</body>
</html>