Web Interface for Attention Visualization

[smarru]

Problem
Right now, visualizations are locked inside a Jupyter notebook. We want a lightweight web app so anyone can explore attention without running notebooks.

Goals

• Design an interactive interface (could be Flask, FastAPI + simple frontend, or Streamlit/Gradio).
• Allow users to change protein input, layer, and head.
• Generate and display the arc diagram + 3D overlay.

Expected Outputs

• Working web interface (even a prototype).
• README notes on how to run it.

Discussion Prompt

• Which web framework should we use?
• How do we balance performance vs. interactivity?

[Vishram1123]

I am interested in working on this issue. I am open to working with any framework, but I personally believe that Flask would be the best way to go as it can most smoothly integrate into the existing Python code. Thank you

[smarru]

@Vishram1123 do describe your next steps

[Vishram1123]

@Vishram1123 do describe your next steps

Sure, sorry. I only got it set up yesterday because of the data being corrupted, but I was exploring AlphaFold Server hosted by Google Deepmind to see what kind of an interface would be appropriate. My first order of business would be to create a basic web interface just to be able to create a structure that can be displayed, and this can be fleshed out afterwards.

[rohan5986]

I would be interested in working on this issue as well. I would start off by creating a simple and interactive web interface that displays different structures, layers, etc. I think Flask would be a good approach as it integrates with existing Python code and React for a clean user-facing interface.

[BLee654]

I am interested in working on this issue. I will use flask since it seems many others will be using flask as well. In particular I want to be able to enhance interactivity without sacrificing performance too much. I'm also thinking of emphasizing which parts of the protein are given the most attention by the model during the visualization of each development step.

[katamyra]

I agree with using both Flask and React, mostly since react would make it easier to have a cleaner looking UI and might have good libraries for unique visualizations of the model/attention, and flask is convenient for the codebase being in python.

[vamagowni]

I'm interested in working on this issue. I'm leaning toward using Gradio for rapid prototyping since it's designed for machine learning and scientific visualization demos and don't require a lot of frontend code, so I can focus on the visualization logic. I'll create interactive controls for the specified elements.

[kr45732]

I would also be interested in working on this issue. I also agree with using Flask. We can also use a library such as 3Dmol.js or NGL.js to render the protein structure on the react frontend.

[Vishram1123]

I agree with using both Flask and React, mostly since react would make it easier to have a cleaner looking UI and might have good libraries for unique visualizations of the model/attention, and flask is convenient for the codebase being in python.

About the React frontend; from doing some extra research, it seems that integrating it with a Flask backend would be difficult because React itself has its own backend, and the best way to approach while doing this would be to expose the API with Flask and consuming it with React. However, this consumer-producer model doesn't make sense in this aspect because the data and compute resources shouldn't be accessible without the frontend that we provide. Using a pure-React backend and frontend would also be troublesome as the entire Openfold architecture is built with Python, and integrating it with JS would be difficult.