---
layout: default
title: "Seeing evolution: ProtSpace maps functional landscapes in protein embeddings"
permalink: /poster/
---

<script src="https://cdn.tailwindcss.com"></script>
<script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    'protspace-blue': '#1e40af',
                    'protspace-light': '#3b82f6',
                }
            }
        }
    }
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">

<div class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <!-- Header -->
        <div class="text-center mb-10">
            <h1 class="text-3xl md:text-4xl font-bold text-protspace-blue mb-4">
                Seeing evolution: ProtSpace maps functional landscapes in protein embeddings
            </h1>
            <div class="mb-6">
                <p class="text-lg text-gray-700 mb-2">
                    Tobias Olenyi¹, Tobias Senoner¹, Gökhan Şişman¹, Peyman Vahidi¹, Burkhard Rost¹'², Ivan Koludarov¹
                </p>
                <div class="text-sm text-gray-600 max-w-3xl mx-auto">
                    <p class="mb-1">¹Chair of Bioinformatics, Technical University of Munich</p>
                    <p>²School of Life Sciences Weihenstephan, Technical University of Munich</p>
                </div>
            </div>
        </div>

        <!-- Quick Access Links -->
        <div class="grid md:grid-cols-2 gap-6 mb-10">
            <!-- Try Online -->
            <div class="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow">
                <div class="flex items-center mb-4">
                    <i class="fas fa-globe text-protspace-blue text-2xl mr-3"></i>
                    <h2 class="text-xl font-semibold text-gray-800">Try Online</h2>
                </div>
                <p class="text-gray-600 mb-4">
                    Access the live web interface - no installation required
                </p>
                <a href="https://protspace.rostlab.org/" 
                   class="inline-block bg-protspace-blue text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors">
                    Launch ProtSpace <i class="fas fa-external-link-alt ml-2"></i>
                </a>
            </div>

            <!-- Installation -->
            <div class="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow">
                <div class="flex items-center mb-4">
                    <i class="fas fa-download text-protspace-blue text-2xl mr-3"></i>
                    <h2 class="text-xl font-semibold text-gray-800">Install Locally</h2>
                </div>
                <p class="text-gray-600 mb-4">
                    Install ProtSpace on your system
                </p>
                <div class="bg-gray-100 rounded p-3 mb-4">
                    <code class="text-sm">pip install "protspace[frontend]"</code>
                </div>
                <a href="https://pypi.org/project/protspace/" 
                   class="inline-block bg-green-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-green-700 transition-colors">
                    View on PyPI <i class="fas fa-external-link-alt ml-2"></i>
                </a>
            </div>
        </div>

        <!-- Documentation & Resources -->
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
            <div class="bg-white rounded-lg shadow-lg p-6">
                <div class="flex items-center mb-4">
                    <i class="fas fa-presentation text-purple-600 text-2xl mr-3"></i>
                    <h3 class="text-lg font-semibold text-gray-800">Poster</h3>
                </div>
                <p class="text-gray-600 mb-4">
                    ISMB/ECCB 2025 Conference Poster
                </p>
                <a href="https://iscb.junolive.co/ISMB/editor/ismbeccb2025_poster_851/" 
                   class="inline-block bg-purple-600 text-white px-4 py-2 rounded font-medium hover:bg-purple-700 transition-colors">
                    View Poster
                </a>
            </div>

            <div class="bg-white rounded-lg shadow-lg p-6">
                <div class="flex items-center mb-4">
                    <i class="fas fa-graduation-cap text-red-600 text-2xl mr-3"></i>
                    <h3 class="text-lg font-semibold text-gray-800">Paper</h3>
                </div>
                <p class="text-gray-600 mb-4">
                    Published in Journal of Molecular Biology
                </p>
                <a href="https://doi.org/10.1016/j.jmb.2025.168940" 
                   class="inline-block bg-red-600 text-white px-4 py-2 rounded font-medium hover:bg-red-700 transition-colors">
                    View Paper
                </a>
            </div>

            <div class="bg-white rounded-lg shadow-lg p-6">
                <div class="flex items-center mb-4">
                    <i class="fab fa-github text-gray-800 text-2xl mr-3"></i>
                    <h3 class="text-lg font-semibold text-gray-800">Source Code</h3>
                </div>
                <p class="text-gray-600 mb-4">
                    View the complete source code and contribute
                </p>
                <a href="https://github.com/tsenoner/protspace" 
                   class="inline-block bg-gray-800 text-white px-4 py-2 rounded font-medium hover:bg-gray-700 transition-colors">
                    GitHub Repository
                </a>
            </div>

            <div class="bg-white rounded-lg shadow-lg p-6">
                <div class="flex items-center mb-4">
                    <i class="fab fa-python text-orange-600 text-2xl mr-3"></i>
                    <h3 class="text-lg font-semibold text-gray-800">Interactive Demo</h3>
                </div>
                <p class="text-gray-600 mb-4">
                    Try ProtSpace in Google Colab
                </p>
                <a href="https://colab.research.google.com/github/tsenoner/protspace/blob/main/examples/notebook/Explore_ProtSpace.ipynb" 
                   class="inline-block bg-orange-600 text-white px-4 py-2 rounded font-medium hover:bg-orange-700 transition-colors">
                    Open Colab
                </a>
            </div>
        </div>

        <!-- Features -->
        <div class="bg-white rounded-lg shadow-lg p-6 mb-10">
            <h2 class="text-2xl font-semibold text-gray-800 mb-6 text-center">Key Features</h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="text-center">
                    <i class="fas fa-cube text-protspace-blue text-3xl mb-3"></i>
                    <h3 class="font-semibold text-gray-800 mb-2">3D Visualization</h3>
                    <p class="text-gray-600 text-sm">Interactive 2D/3D protein embedding plots</p>
                </div>
                <div class="text-center">
                    <i class="fas fa-palette text-protspace-blue text-3xl mb-3"></i>
                    <h3 class="font-semibold text-gray-800 mb-2">Feature Styling</h3>
                    <p class="text-gray-600 text-sm">Color-code proteins by various features</p>
                </div>
                <div class="text-center">
                    <i class="fas fa-project-diagram text-protspace-blue text-3xl mb-3"></i>
                    <h3 class="font-semibold text-gray-800 mb-2">Structure Integration</h3>
                    <p class="text-gray-600 text-sm">View 3D protein structures alongside embeddings</p>
                </div>
                <div class="text-center">
                    <i class="fas fa-search text-protspace-blue text-3xl mb-3"></i>
                    <h3 class="font-semibold text-gray-800 mb-2">Search & Filter</h3>
                    <p class="text-gray-600 text-sm">Find and highlight specific proteins</p>
                </div>
                <div class="text-center">
                    <i class="fas fa-download text-protspace-blue text-3xl mb-3"></i>
                    <h3 class="font-semibold text-gray-800 mb-2">Export Options</h3>
                    <p class="text-gray-600 text-sm">High-quality SVG and interactive HTML</p>
                </div>
            </div>
        </div>

        <!-- Contact Block -->
        <div class="bg-white rounded-lg shadow-lg p-8 mb-10">
            <div class="text-center">
                <h2 class="text-2xl font-semibold text-gray-800 mb-6">Contact Information</h2>
                <div class="mb-6">
                    <p class="text-lg font-medium text-protspace-blue mb-3">General Contact</p>
                    <p class="text-gray-600 text-sm mb-4">&lt;firstname&gt;.&lt;lastname&gt;@tum.de</p>
                </div>
                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <h3 class="text-lg font-medium text-protspace-blue mb-3">Lead Authors</h3>
                        <p class="text-gray-700 mb-1">Tobias Olenyi</p>
                        <p class="text-gray-700">Tobias Senoner</p>
                    </div>
                    <div>
                        <h3 class="text-lg font-medium text-protspace-blue mb-3">Principal Investigator</h3>
                        <p class="text-gray-700">Ivan Koludarov</p>
                    </div>
                </div>
                <div class="mt-6 pt-6 border-t border-gray-200">
                    <div class="flex items-center justify-center mb-4">
                        <i class="fas fa-university text-protspace-blue text-2xl mr-3"></i>
                        <div class="text-left">
                            <p class="font-medium text-gray-800">Chair of Bioinformatics</p>
                            <p class="text-gray-600">Technical University of Munich</p>
                        </div>
                    </div>
                    <a href="https://www.cs.cit.tum.de/bio/home/" 
                       class="inline-block bg-protspace-blue text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors">
                        Visit Rostlab <i class="fas fa-external-link-alt ml-2"></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <div class="text-center text-gray-600">
            <p class="text-sm">
                <i class="fas fa-code"></i> Open Source • 
                <i class="fas fa-balance-scale"></i> GPL v3 License • 
                <i class="fas fa-star"></i> Citation Available
            </p>
        </div>
    </div>
</div>