Streamlit not loding html with external css & js into app

Using Streamlit
1

I have a folder structure for my app like this

  • app.py
  • index.html
  • css/
    • style.css
  • font/
    • font_file.ttf
  • img/
    • image.jpg

and following is my code to in app.py

def html():
# Read the index.html file
with open(‘index.html’, ‘r’) as file:
html_content = file.read()

# Display the HTML content
st.markdown(html_content, unsafe_allow_html=True)

if _name == ‘_main’
st.set_page_config(page_title=“Namkrarn” ,page_icon=“:shark”,#EP: hod dd they find a symbol?
layout=“wide”,initial_sidebar_state=“collapsed”,)
html()

Following is the screenshot of my output for the same

image
image1351×534 13.1 KB

I will appreciate if some one point me into right direction for the above

index.html

<head>
  <title>Naamkaram</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
 <nav class="navbar navbar-expand-md navbar-light bg-white shadow fixed-top">
  <!-- Brand -->
  <a class="navbar-brand" href="#"><img src = "img/Naamkaram.png" class = "img-fluid"></a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Login/Signup</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
			<select class = "form-control">
				<option>EN</option>
				<option>MR</option>
			</select>
		</a>
      </li>
    </ul>
  </div>
</nav> 
<div class="container-fluid mt-5 pt-4 px-0">
  <section class = "home bg px-4 py-5" id = "home">
	<h1 class = "cust-font text-white">Discover the Perfect Name Unleash the <br> Power of AI for Naming Your Child</h1>
	
	<a href = "#name"><button class = "btn btn-down" type = "button"><span>Get Started</span></button></a>
  </section>
  
  <section class = "name bg1 px-4 py-5" id = "name">
	<div class = "container pt-5 mt-5 px-0">
		<div class = "col-md-8 mx-auto pt-5 px-0">
			<div class = "card">
				<div class = "card-body">
					<h3 class = "cust-font text-center">Lets Generate Name</h3>
					
					<div class = "row">
						<div class = "col-md-6 col-12 mb-4">
							<label>Religion</label>
							<select class = "form-control">
								<option>Select Religion</option>
								<option>Hindu</option>
								<option>Sikh</option>
								<option>Jain</option>
								<option>Christian</option>
							</select>
						</div>
						<!--/.col-->
						<div class = "col-md-6 col-12 mb-4">
							<img src = "img/boy.png" class = "img-fluid mr-2">
							<input type="radio" id="test1" name="radio-group" checked>
							<label for="test1" class = "mr-3">Boy</label>
							
							<img src = "img/girl.png" class = "img-fluid mr-2">
							<input type="radio" id="test2" name="radio-group">
							<label for="test2">Girl</label>
						</div>
						<!--/.col-->
						<div class = "col-md-6 col-12 mb-4">
							<input type="radio" id="test3" name="radio-group1" checked>
							<label for="test3" class = "mr-3">Parents Name</label>
							<div class = "col-12 px-0 mb-3">
								<label>Father Name</label>
								<input type = "text" class = "form-control" placeholder = "Type father’s Name Here">
							</div>
							<div class = "col-12 px-0">
								<label>Mother Name</label>
								<input type = "text" class = "form-control" placeholder = "Type mother’s Name Here">
							</div>
						</div>
						<!--/.col-->
						
						<div class = "col-md-6 col-12 mb-4">
							<input type="radio" id="test4" name="radio-group1" checked>
							<label for="test" class = "mr-3">First Letter Of Name</label>
							<div class = "col-12 px-0">
								<label>1st Letter Of Name</label>
								<input type = "text" class = "form-control" placeholder = "Type 1st Letter Of Name">
							</div>
						</div>
						<!--/.col-->
						<div class = "col-12 text-center my-4">
							<a href = "#gen"><button class = "btn btn-generate px-5 bg-white shadow-sm" type = "button"><span>Generate</span></button></a>
						</div>
						<!--/.col-->
					</div>
					<!--/.row-->
				</div>
			</div>
		</div>
	</div>
  </section>
  
  <section class = "gen bg2 px-4 py-5" id = "gen">
	<div class = "container pt-5 px-0">
		<div class = "col-md-12 px-0 mx-auto">
			<h1 class = "cust-font text-center text-white">Names Generated</h1>
			
			<div class = "table-responsive">
				<table class = "table table-bordered">
					<thead>
						<tr>
							<th>Name</th>
							<th>Meanings</th>
							<th>Zodiac</th>
							<th>Action</th>
							<th>Likes</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>Kartik</td>
							<td>Lorem ispum </td>
							<td>Libra</td>
							<td><button class = "btn btn-know btn-sm" type = "button" data-toggle="modal" data-target="#myModal">Know More</button></td>
							<td>3.5k <i class="fa fa-thumbs-up ml-2" style = "color:#FF0082;"></i></td>
						</tr>
						<tr>
							<td>Aryan</td>
							<td>Lorem ispum </td>
							<td>Aquarius</td>
							<td><button class = "btn btn-know btn-sm" type = "button">Know More</button></td>
							<td>8.2k <i class="fa fa-thumbs-up ml-2" style = "color:#FF0082;"></i></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class = "col-12 text-center my-5">
				<button class = "btn btn-generate px-5 bg-white shadow-sm" type = "button" data-toggle="modal" data-target="#myModal1"><span>Generate More</span></button>
			</div>
			<!--/.col-->
		</div>
	</div>
  </section>
  
  
  <!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body md-bg">
		<div class = "row">
			<div class = "col-6">
				<h1 class="modal-title text-white cust-font">Naamkaram</h1>
			</div>
			<div class = "col-6">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<div class = "col-12 my-5">
				<p class = "mb-5" style = "font-size:80%;color:#9747FF;">Name Card</p>
				<h4 class = "mb-4">Name : Kartik</h4>
				<p><b>Meaning</b> : is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
				<p><b>Zodiac Sign</b> : Virgo</p>
				<p><b>Tags </b> : Peaceful, Loving, Caring</p>
				<p class = "mb-5 pb-5"><b>Cast</b> : Hindu, Jain, Maratha </p>
			</div>
			
			<div class = "col-12 text-right">
				<i class = "fa fa-share text-white mr-3"></i>
				<i class = "fa fa-download text-white"></i>
			</div>
		</div>
		<!--/.row-->
      </div>
    </div>
  </div>
</div>

<div class="modal" id="myModal1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
	 <div class="modal-header" style = "background : #9747ff">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body" style = "background : #9747ff">
		<div class = "row">
			<div class = "col-md-6 col-12 text-center border-right mb-4">
				<h1 class = "cust-font text-white text-center mb-4">Free</h1>
				<p class = "text-white text-left"><i class = "fa fa-star mr-2"></i> 2 Names as per day</p>
				<p class = "text-white text-left mb-5"><i class = "fa fa-star mr-2"></i> 1 Name extra (Bonus for 1st time users)</p>
				<button class = "btn btn-price w-100" type = "button">Free Clamed</button>
			</div>
			<!--/.col-->
			<div class = "col-md-6 col-12 text-center border-right">
				<h1 class = "cust-font text-white text-center mb-4">Premium</h1>
				<p class = "text-white text-left mb-4 pb-3"><i class = "fa fa-star mr-2"></i> Unlimited names per day</p>
				<button class = "btn btn-price w-100 mt-5" type = "button">Free Clamed</button>
			</div>
			<!--/.col-->
		</div>
		<!--/.row-->
      </div>
    </div>
  </div>
</div>


</div>

</body>
</html> 
type or paste code here
2

There doesn’t seem to be anything explicitly wrong with your code – could you share more about the contents of index.html?

This script works fine, for example:

import streamlit as st

HTML_STRING = """
<html>
<body>
<h1 style="color:blue;">This is a Blue Heading</h1>
<p style="color:red;">This is a red paragraph.</p>
</body>
</html>
"""

st.markdown(HTML_STRING, unsafe_allow_html=True)

Also, when you paste code snippets, could you please paste them as code blocks (like the one above)? Otherwise they are very hard to read and test.

3

I have added index.html content into my question

4

Thanks! That’s helpful. I think the basic reason it’s not working well is that you have a very complex page that you’re trying to embed, and it’s not playing well with the streamlit layout when embedded. My recommendations:

  1. Since what you’re trying to embed appears to basically be a form, just rebuild it in streamlit with streamlit widgets. This is my strong recommendation, as otherwise you won’t be able to actually interact with the data from the form from within your app.

  2. If you absolutely must use this html/js/css embedded, it works slightly better if you use the components API to embed the html.

from pathlib import Path
from streamlit.components.v1 import html

HTML_STRING = Path("index.html").read_text()

html(HTML_STRING, width=700, height=2000, scrolling=True)

It doesn’t work well, but it is better. Again, though, option 1 is my strong recommendation.

5

Thanks & sorry for the late reply
I am able to resolve the issue with stream lit

1 Like
6

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