How to add this component to Streamlit?

I am interested in displaying my deep learning results of bioinformatics application by using streamlit. Recent days, I met a problem of how to add a javascript (ProSeqViewer) to streamlit page. Last week I read the documentation of streamlit components and watched some tutorial video, but I think it is still too sophisticated to me. Yes, I am not that familiar with frontend developing.

As far as I know, if I write a html directly, the javascript works. But I don’t know how to embed this to a streamlit page. Anyone can help me?

		<link rel="stylesheet" type="text/css" href="">
		<script src=""></script>
		<div id="psv"></div>
		const sequences = [
			{sequence: 'TLRAIENFYISNNKISDIPEFVR', id: 1, label: 'ASPA_ECOLI/13-156'},
			{sequence: 'TLRASENFPITGYKIHEE..MIN', id: 2, label: 'ASPA_BACSU/16-156'},
			{sequence: 'GTKFPRRIIWS............', id: 3, label: 'FUMC_SACS2/1-124'}

		// Input icons
		const icons = [
			{sequenceId: 1, start: 2, end: 2, icon: 'lollipop'},
			{sequenceId: 1, start: 13, end: 13, icon: 'lollipop'}

		// Options and configuration
		const options = {
			chunkSize: 0,
			sequenceColor: 'clustal',
			lateralIndexes: false

		// Initialize the viewer
		const psv = new ProSeqViewer('psv');

		// Generate the HTML
		psv.draw({sequences, options, icons});

You can add HTML/JavaScript directly to the page with st.components.v1.html from the components submodule.

Note that your HTML will get wrapped in a body tag within an iframe using st.components.v1.html.

Thank you! I tried before but It weirdly failed. Fortunately, I made it just now just using st.components.v1.html

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.