import streamlit as st
import requests
from dotenv import load_dotenv
import os
load_dotenv()


API_URL_SEMANTICS = "https://api-inference.huggingface.co/models/Salesforce/blip-image-captioning-large"
API_URL_CAPTION = "https://api-inference.huggingface.co/models/mistralai/Mistral-7B-Instruct-v0.2"

headers = {"Authorization": f"Bearer {os.getenv('api_key')}"}
st.set_page_config(page_title="Instagram Post Improvement")
def generateSemantic(file):
    response = requests.post(API_URL_SEMANTICS, headers=headers, data=file)
    return response.json()[0]['generated_text']

def generateCaption(payload):
	response = requests.post(API_URL_CAPTION , headers=headers, json=payload)
	return response.json()[0]['generated_text']

st.title("Create an Eye-Catching Instagram Post 📸✨")
st.write("""  🌟 This project utilizes two free pre-trained models from Hugging Face to enhance the engagement and attractiveness of your Instagram posts for your followers. It accomplishes this through two steps:

1-🚀 Capturing the semantics of an image.

2-🎀 Transforming the captured semantics into an appealing Instagram post.  """)
st.sidebar.title('About app')
st.sidebar.info(
    "This is a Streamlit application created by Gasbaoui Mohammed el Amin.\n"
    "It demonstrates how to interact with pre-trained model hagging face."
)

file=st.file_uploader("upload an image",type=["jpg","jpeg","png"])
if file:
  col1,col2=st.columns(2)
  with col1:
      st.image(file,use_column_width=True)
  with col2:
      
      with st.spinner("Generating semantics..."):
        outputSemantic=generateSemantic(file)
        st.subheader("Output Semantic")
        st.markdown(
    """
    <style>
        /* Style for the container */
        .fancy-text {
            padding: 10px;
            border-radius: 10px; /* Make edges curved */
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Add box shadow */
            border: 2px solid #ccc; /* Add a border */
        }
    </style>
    """,
        unsafe_allow_html=True
)

        # Now use the styled container for your text
        st.markdown(f'<div class="fancy-text">{outputSemantic}</div>',
        unsafe_allow_html=True)
                
      with st.spinner("Generating caption..."):
        promptDictionary={
             "inputs": f"convert the following image semantics '{outputSemantic}'  "
             f"to an instagram caption make sure to add hashtags and emojis.,"
             f"Answer: ",
             
        }
        st.subheader("Caption")
        outputCaption=generateCaption(promptDictionary)
        result=outputCaption.split("Answer: ")[1]
        st.markdown(f'<div class="fancy-text">{result}</div>',
        unsafe_allow_html=True)