demo

.gitattributes

@@ -33,3 +33,7 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+magicPromt/Index_stemmed/index.json filter=lfs diff=lfs merge=lfs -text
+Index_stemmed/index.json filter=lfs diff=lfs merge=lfs -text
+Index_stemmed/document_metadata.json filter=lfs diff=lfs merge=lfs -text
+data/data.csv.zip filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1 @@
+__pycache__/

Dockerfile

@@ -0,0 +1,11 @@
+FROM python:3.9
+
+WORKDIR /code
+
+COPY ./requirements.txt /code/requirements.txt
+
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+COPY . .
+
+CMD ["python", "app.py"]

Index_stemmed/document_metadata.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:49f0a52432ead8b4b1aeba7df2c48632f7f4578e82d7433a8ac6d8adda1c5239
+size 9044788

Index_stemmed/index.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5f89061059c002998d57aaf565439cbb9e424bb074db41a4f035930e7ee53492
+size 36154176

README.md

@@ -5,6 +5,7 @@ colorFrom: purple
 colorTo: purple
 sdk: docker
 pinned: false
+app_port: 7860
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,137 @@
+from flask import Flask, redirect, render_template, request, url_for
+from document_preprocessor import *
+from indexing import *
+from ranker import *
+import pandas as pd
+from image2text import *
+app = Flask(__name__)
+
+
+def initialize_all():
+    MAIN_INDEX_STEMMED = "Index_stemmed"
+    STOPWORD_PATH = "data/stopwords.txt"
+
+    # stopwords
+    stopwords = set()
+    with open(STOPWORD_PATH, "r", encoding="utf-8") as file:
+        for stopword in file:
+            stopwords.add(stopword.strip())
+
+    # index
+    main_index = BasicInvertedIndex()
+    main_index.load(MAIN_INDEX_STEMMED)
+
+    # processor
+    preprocessor = RegexTokenizer(token_regex=r"[\w\.-]+", stemming=True)
+
+    bm25 = BM25(main_index)
+    pipeline = Ranker(main_index, preprocessor, stopwords, bm25)
+    return pipeline
+
+
+def get_results_all(ranker, query, top_n, args=None):
+    DATASET_CSV_PATH = "data/data.csv.zip"
+    results = ranker.query(query)
+    docids = [result[0] for result in results]
+    df = pd.read_csv(DATASET_CSV_PATH)
+    if args is None:
+        df_results = df.iloc[docids]
+    else:
+        df_results = df.iloc[docids]
+        for arg in args:
+            if arg:
+                arg = arg.split(",")
+                prompt_filter = ""
+                for tag in arg:
+                    prompt_filter += (
+                        r'df_results["prompt"].str.contains(fr"\b'
+                        + tag
+                        + r'\b", regex=True, case=False) | '
+                    )
+                df_results = df_results[eval(prompt_filter[:-3])]
+    prompts = df_results["prompt"].tolist()[:top_n]
+    urls = df_results["pic_url"].tolist()[:top_n]
+    return prompts, urls
+
+
+engine = initialize_all()
+
+
+@app.route("/")
+def home():
+    query = "A mountain in spring"
+    print(query)
+    prompts, urls = get_results_all(engine, query, 200)
+    result = list(zip(prompts, urls))
+    return render_template("index.html", result=result)
+
+
+@app.route("/search", methods=["POST", "GET"])
+def search():
+    if request.method == "POST":
+        query = request.form.get("query")
+        if not query:
+            query = "A mountain in spring with white cloud"
+        style = request.form.get("style")
+        scene = request.form.get("scene")
+        medium = request.form.get("medium")
+        light = request.form.get("light")
+        quality = request.form.get("quality")
+        print(query)
+        print(style)
+        print(scene)
+        print(medium)
+        print(light)
+        print(quality)
+        args = [style, scene, medium, light, quality]
+        prompts, urls = get_results_all(engine, query, 200, args)
+        result = list(zip(prompts, urls))
+        return render_template(
+            "search.html",
+            result=result,
+            query=query,
+            style=style,
+            scene=scene,
+            medium=medium,
+            light=light,
+            quality=quality,
+        )
+    return redirect(url_for("home"))
+
+@app.route("/search_picture", methods=["POST", "GET"])
+def search_picture():
+    if request.method == "POST":
+        query=request.files['img']
+        query = image2textData(query)
+        if not query:
+            query = "A mountain in spring with white cloud"
+        style = request.form.get("style")
+        scene = request.form.get("scene")
+        medium = request.form.get("medium")
+        light = request.form.get("light")
+        quality = request.form.get("quality")
+        print(query)
+        print(style)
+        print(scene)
+        print(medium)
+        print(light)
+        print(quality)
+        args = [style, scene, medium, light, quality]
+        prompts, urls = get_results_all(engine, query, 200, args)
+        result = list(zip(prompts, urls))
+        return render_template(
+            "search.html",
+            result=result,
+            query=query,
+            style=style,
+            scene=scene,
+            medium=medium,
+            light=light,
+            quality=quality,
+        )
+    return redirect(url_for("home"))
+
+
+if __name__ == "__main__":
+    # engine = initialize_all()
+    app.run(debug=True)

data/data.csv.zip

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:db6059cbd15bd103448593d5e9aa2dc2186c8999eb81ea86e69d45ea1fb2d2d0
+size 15907777

data/stopwords.txt

@@ -0,0 +1,544 @@
+a
+able
+about
+above
+according
+accordingly
+across
+actually
+after
+afterwards
+again
+against
+ain't
+all
+allow
+allows
+almost
+alone
+along
+already
+also
+although
+always
+am
+among
+amongst
+an
+and
+another
+any
+anybody
+anyhow
+anyone
+anything
+anyway
+anyways
+anywhere
+apart
+appear
+appreciate
+appropriate
+are
+aren't
+around
+as
+aside
+ask
+asking
+associated
+at
+available
+away
+awfully
+be
+became
+because
+become
+becomes
+becoming
+been
+before
+beforehand
+behind
+being
+believe
+below
+beside
+besides
+best
+better
+between
+beyond
+both
+brief
+but
+by
+c'mon
+c's
+came
+can
+can't
+cannot
+cant
+cause
+causes
+certain
+certainly
+changes
+clearly
+co
+com
+come
+comes
+concerning
+consequently
+consider
+considering
+contain
+containing
+contains
+corresponding
+could
+couldn't
+course
+currently
+definitely
+described
+despite
+did
+didn't
+different
+do
+does
+doesn't
+doing
+don't
+done
+down
+downwards
+during
+each
+edu
+eg
+eight
+either
+else
+elsewhere
+enough
+entirely
+especially
+et
+etc
+even
+ever
+every
+everybody
+everyone
+everything
+everywhere
+ex
+exactly
+example
+except
+far
+few
+fifth
+first
+five
+followed
+following
+follows
+for
+former
+formerly
+forth
+four
+from
+further
+furthermore
+get
+gets
+getting
+given
+gives
+go
+goes
+going
+gone
+got
+gotten
+greetings
+had
+hadn't
+happens
+hardly
+has
+hasn't
+have
+haven't
+having
+he
+he's
+hello
+help
+hence
+her
+here
+here's
+hereafter
+hereby
+herein
+hereupon
+hers
+herself
+hi
+him
+himself
+his
+hither
+hopefully
+how
+howbeit
+however
+i'd
+i'll
+i'm
+i've
+ie
+if
+ignored
+immediate
+in
+inasmuch
+inc
+indeed
+indicate
+indicated
+indicates
+inner
+insofar
+instead
+into
+inward
+is
+isn't
+it
+it'd
+it'll
+it's
+its
+itself
+just
+keep
+keeps
+kept
+know
+knows
+known
+last
+lately
+later
+latter
+latterly
+least
+less
+lest
+let
+let's
+like
+liked
+likely
+little
+look
+looking
+looks
+ltd
+mainly
+many
+may
+maybe
+me
+mean
+meanwhile
+merely
+might
+more
+moreover
+most
+mostly
+much
+must
+my
+myself
+name
+namely
+nd
+near
+nearly
+necessary
+need
+needs
+neither
+never
+nevertheless
+new
+next
+nine
+no
+nobody
+non
+none
+noone
+nor
+normally
+not
+nothing
+novel
+now
+nowhere
+obviously
+of
+off
+often
+oh
+ok
+okay
+old
+on
+once
+one
+ones
+only
+onto
+or
+other
+others
+otherwise
+ought
+our
+ours
+ourselves
+out
+outside
+over
+overall
+own
+particular
+particularly
+per
+perhaps
+placed
+please
+plus
+possible
+presumably
+probably
+provides
+que
+quite
+qv
+rather
+rd
+re
+really
+reasonably
+regarding
+regardless
+regards
+relatively
+respectively
+right
+said
+same
+saw
+say
+saying
+says
+second
+secondly
+see
+seeing
+seem
+seemed
+seeming
+seems
+seen
+self
+selves
+sensible
+sent
+serious
+seriously
+seven
+several
+shall
+she
+should
+shouldn't
+since
+six
+so
+some
+somebody
+somehow
+someone
+something
+sometime
+sometimes
+somewhat
+somewhere
+soon
+sorry
+specified
+specify
+specifying
+still
+sub
+such
+sup
+sure
+t's
+take
+taken
+tell
+tends
+th
+than
+thank
+thanks
+thanx
+that
+that's
+thats
+the
+their
+theirs
+them
+themselves
+then
+thence
+there
+there's
+thereafter
+thereby
+therefore
+therein
+theres
+thereupon
+these
+they
+they'd
+they'll
+they're
+they've
+think
+third
+this
+thorough
+thoroughly
+those
+though
+three
+through
+throughout
+thru
+thus
+to
+together
+too
+took
+toward
+towards
+tried
+tries
+truly
+try
+trying
+twice
+two
+un
+under
+unfortunately
+unless
+unlikely
+until
+unto
+up
+upon
+us
+use
+used
+useful
+uses
+using
+usually
+value
+various
+very
+via
+viz
+vs
+want
+wants
+was
+wasn't
+way
+we
+we'd
+we'll
+we're
+we've
+welcome
+well
+went
+were
+weren't
+what
+what's
+whatever
+when
+whence
+whenever
+where
+where's
+whereafter
+whereas
+whereby
+wherein
+whereupon
+wherever
+whether
+which
+while
+whither
+who
+who's
+whoever
+whole
+whom
+whose
+why
+will
+willing
+wish
+with
+within
+without
+won't
+wonder
+would
+would
+wouldn't
+yes
+yet
+you
+you'd
+you'll
+you're
+you've
+your
+yours
+yourself
+yourselves
+zero

document_preprocessor.py

@@ -0,0 +1,111 @@
+from nltk.tokenize import RegexpTokenizer
+from nltk.stem import PorterStemmer
+
+class Tokenizer:
+    def __init__(
+        self,
+        lowercase: bool = True,
+        multiword_expressions: list[str] = None,
+        stemming: bool = False,
+    ) -> None:
+        """
+        A generic class for objects that turn strings into sequences of tokens.
+        A tokenizer can support different preprocessing options or use different methods
+        for determining word breaks.
+
+        Args:
+            lowercase: Whether to lowercase all the tokens
+            multiword_expressions: A list of strings that should be recognized as single tokens
+                If set to 'None' no multi-word expression matching is performed.
+                No need to perform/implement multi-word expression recognition for HW3.
+        """
+        # TODO: Save arguments that are needed as fields of this class
+        self.lowercase = lowercase
+        self.multiword_expressions = multiword_expressions
+        self.stemming = stemming
+
+    def find_and_replace_mwes(self, input_tokens: list[str]) -> list[str]:
+        """
+        IGNORE THIS PART; NO NEED TO IMPLEMENT THIS SINCE NO MULTI-WORD EXPRESSION PROCESSING IS TO BE USED.
+        For the given sequence of tokens, finds any recognized multi-word expressions in the sequence
+        and replaces that subsequence with a single token containing the multi-word expression.
+
+        Args:
+            input_tokens: A list of tokens
+
+        Returns:
+            A list of tokens containing processed multi-word expressions
+        """
+        # NOTE: You shouldn't implement this in homework
+        raise NotImplemented("MWE is not supported")
+
+    def postprocess(self, input_tokens: list[str]) -> list[str]:
+        """
+        Performs any set of optional operations to modify the tokenized list of words such as
+        lower-casing and stemming and returns the modified list of tokens.
+
+        Args:
+            input_tokens: A list of tokens
+
+        Returns:
+            A list of tokens processed by lower-casing and stemming depending on the given condition
+        """
+        # TODO: Add support for lower-casing
+        if self.lowercase:
+            input_tokens = [token.lower() for token in input_tokens]
+        if self.stemming:
+            ps = PorterStemmer()
+            input_tokens = [ps.stem(token) for token in input_tokens]
+        return input_tokens
+
+    def tokenize(self, text: str) -> list[str]:
+        """
+        Splits a string into a list of tokens and performs all required postprocessing steps.
+
+        Args:
+            text: An input text you want to tokenize
+
+        Returns:
+            A list of tokens
+        """
+        raise NotImplementedError(
+            "tokenize() is not implemented in the base class; please use a subclass"
+        )
+
+
+class RegexTokenizer(Tokenizer):
+    def __init__(
+        self,
+        token_regex: str,
+        lowercase: bool = True,
+        multiword_expressions: list[str] = None,
+        stemming: bool = False,
+    ) -> None:
+        """
+        Uses NLTK's RegexpTokenizer to tokenize a given string.
+
+        Args:
+            token_regex: Use the following default regular expression pattern: '\\w+'
+            lowercase: Whether to lowercase all the tokens
+            multiword_expressions: A list of strings that should be recognized as single tokens
+                If set to 'None' no multi-word expression matching is performed.
+                No need to perform/implement multi-word expression recognition for HW3; you can ignore this.
+        """
+        super().__init__(lowercase, multiword_expressions, stemming)
+        # TODO: Save a new argument that is needed as a field of this class
+        # TODO: Initialize the NLTK's RegexpTokenizer
+        self.tokenizer = RegexpTokenizer(token_regex)
+
+    def tokenize(self, text: str) -> list[str]:
+        """Uses NLTK's RegexTokenizer and a regular expression pattern to tokenize a string.
+
+        Args:
+            text: An input text you want to tokenize
+
+        Returns:
+            A list of tokens
+        """
+        # TODO: Tokenize the given text and perform postprocessing on the list of tokens
+        #       using the postprocess function
+        words = self.tokenizer.tokenize(text)
+        return self.postprocess(words)

image2text.py

@@ -0,0 +1,18 @@
+import requests
+
+API_URL = "https://api-inference.huggingface.co/models/Salesforce/blip-image-captioning-base"
+headers = {"Authorization": f"Bearer KEY"}
+
+def image2textFilename(filename):
+    with open(filename, "rb") as f:
+        data = f.read()
+    response = requests.post(API_URL, headers=headers, data=data)
+    return response.json()[0]["generated_text"]
+def image2textData(data):
+    print(data)
+    response = requests.post(API_URL, headers=headers, data=data)
+    return response.json()[0]["generated_text"]
+
+# output = image2textFilename("/home/wznmickey/Pictures/20230130-153108.jpeg")
+
+# print(output)

indexing.py

@@ -0,0 +1,444 @@
+from enum import Enum
+import json
+import os
+from tqdm import tqdm
+from collections import Counter, defaultdict
+from document_preprocessor import Tokenizer
+import gzip
+
+
+class IndexType(Enum):
+    # The three types of index currently supported are InvertedIndex, PositionalIndex and OnDiskInvertedIndex
+    InvertedIndex = 'BasicInvertedIndex'
+    # NOTE: You don't need to support the following three
+    PositionalIndex = 'PositionalIndex'
+    OnDiskInvertedIndex = 'OnDiskInvertedIndex'
+    SampleIndex = 'SampleIndex'
+
+
+class InvertedIndex:
+    def __init__(self) -> None:
+        """
+        The base interface representing the data structure for all index classes.
+        The functions are meant to be implemented in the actual index classes and not as part of this interface.
+        """
+        self.statistics = defaultdict(Counter)  # Central statistics of the index
+        self.index = {}  # Index
+        self.document_metadata = {}  # Metadata like length, number of unique tokens of the documents
+
+    # NOTE: The following functions have to be implemented in the three inherited classes and not in this class
+
+    def remove_doc(self, docid: int) -> None:
+        """
+        Removes a document from the index and updates the index's metadata on the basis of this
+        document's deletion.
+
+        Args:
+            docid: The id of the document
+        """
+        # TODO: Implement this to remove a document from the entire index and statistics
+        raise NotImplementedError
+
+    def add_doc(self, docid: int, tokens: list[str]) -> None:
+        """
+        Adds a document to the index and updates the index's metadata on the basis of this
+        document's addition (e.g., collection size, average document length).
+
+        Args:
+            docid: The id of the document
+            tokens: The tokens of the document
+                Tokens that should not be indexed will have been replaced with None in this list.
+                The length of the list should be equal to the number of tokens prior to any token removal.
+        """
+        # TODO: Implement this to add documents to the index
+        raise NotImplementedError
+
+    def get_postings(self, term: str) -> list[tuple[int, int]]:
+        """
+        Returns the list of postings, which contains (at least) all the documents that have that term.
+        In most implementation, this information is represented as list of tuples where each tuple
+        contains the docid and the term's frequency in that document.
+        
+        Args:
+            term: The term to be searched for
+
+        Returns:
+            A list of tuples containing a document id for a document
+            that had that search term and an int value indicating the term's frequency in 
+            the document
+        """
+        # TODO: Implement this to fetch a term's postings from the index
+        raise NotImplementedError
+
+    def get_doc_metadata(self, doc_id: int) -> dict[str, int]:
+        """
+        For the given document id, returns a dictionary with metadata about that document.
+        Metadata should include keys such as the following:
+            "unique_tokens": How many unique tokens are in the document (among those not-filtered)
+            "length": how long the document is in terms of tokens (including those filtered)
+
+        Args:
+            docid: The id of the document
+
+        Returns:
+            A dictionary with metadata about the document
+        """
+        # TODO: Implement to fetch a particular document stored in metadata
+        raise NotImplementedError
+
+    def get_term_metadata(self, term: str) -> dict[str, int]:
+        """
+        For the given term, returns a dictionary with metadata about that term in the index.
+        Metadata should include keys such as the following:
+            "count": How many times this term appeared in the corpus as a whole
+
+        Args:
+            term: The term to be searched for
+
+        Returns:
+            A dictionary with metadata about the term in the index
+        """
+        # TODO: Implement to fetch a particular term stored in metadata
+        raise NotImplementedError
+
+    def get_statistics(self) -> dict[str, int]:
+        """
+        Returns a dictionary mapping statistical properties (named as strings) about the index to their values.  
+        Keys should include at least the following:
+            "unique_token_count": how many unique terms are in the index
+            "total_token_count": how many total tokens are indexed including filterd tokens), 
+                i.e., the sum of the lengths of all documents
+            "stored_total_token_count": how many total tokens are indexed excluding filterd tokens
+            "number_of_documents": the number of documents indexed
+            "mean_document_length": the mean number of tokens in a document (including filter tokens)
+
+        Returns:
+              A dictionary mapping statistical properties (named as strings) about the index to their values
+        """
+        # TODO: Calculate statistics like 'unique_token_count', 'total_token_count',
+        #       'number_of_documents', 'mean_document_length' and any other relevant central statistic
+        raise NotImplementedError
+
+    def save(self, index_directory_name: str) -> None:
+        """
+        Saves the state of this index to the provided directory.
+        The save state should include the inverted index as well as
+        any metadata need to load this index back from disk.
+
+        Args:
+            index_directory_name: The name of the directory where the index will be saved
+        """
+        # TODO: Save the index files to disk
+        raise NotImplementedError
+
+    def load(self, index_directory_name: str) -> None:
+        """
+        Loads the inverted index and any associated metadata from files located in the directory.
+        This method will only be called after save() has been called, so the directory should
+        match the filenames used in save().
+
+        Args:
+            index_directory_name: The name of the directory that contains the index
+        """
+        # TODO: Load the index files from disk to a Python object
+        raise NotImplementedError
+
+
+class BasicInvertedIndex(InvertedIndex):
+    def __init__(self) -> None:
+        """
+        An inverted index implementation where everything is kept in memory
+        """
+        super().__init__()
+        self.statistics['index_type'] = 'BasicInvertedIndex'
+        # For example, you can initialize the index and statistics here:
+        #    self.statistics['docmap'] = {}
+        #    self.index = defaultdict(list)
+        #    self.doc_id = 0
+        self.statistics['term_metadata'] = defaultdict(list)
+        self.statistics['unique_token_count'] = 0
+        self.statistics['total_token_count'] = 0
+        self.statistics['stored_total_token_count'] = 0
+        self.statistics['number_of_documents'] = 0
+        self.statistics['mean_document_length'] = 0
+        self.index = defaultdict(list)
+  
+    # TODO: Implement all the functions mentioned in the interface
+    # This is the typical inverted index where each term keeps track of documents and the term count per document
+    def remove_doc(self, docid: int) -> None:
+        # TODO implement this to remove a document from the entire index and statistics
+        for token in self.index:
+            for i, (doc, count) in enumerate(self.index[token]):
+                if doc == docid:
+                    self.index[token].pop(i)
+                    self.statistics['stored_total_token_count'] -= count
+                    self.statistics['term_metadata'][token][0] -= 1
+                    self.statistics['term_metadata'][token][1] -= count
+                    break
+        self.statistics['total_token_count'] -= self.document_metadata[docid]['length']
+        self.statistics['number_of_documents'] -= 1
+        del self.document_metadata[docid]
+        self.get_statistics()
+
+
+    def add_doc(self, docid: int, tokens: list[str]) -> None:
+        '''
+        Adds a document to the index and updates the index's metadata on the basis of this
+        document's addition (e.g., collection size, average document length, etc.)
+
+        Arguments:
+            docid [int]: the identifier of the document
+
+            tokens list[str]: the tokens of the document. Tokens that should not be indexed will have 
+            been replaced with None in this list. The length of the list should be equal to the number
+            of tokens prior to any token removal.
+        '''
+        # TODO implement this to add documents to the index
+        if not tokens:
+            return
+        
+        token_counts = Counter(tokens)
+        for token in token_counts:
+            if token is None:
+                continue
+            self.index[token].append((docid, token_counts[token]))
+            self.statistics['stored_total_token_count'] += token_counts[token]
+            if token in self.statistics['term_metadata']:
+                self.statistics['term_metadata'][token][0] += 1
+                self.statistics['term_metadata'][token][1] += token_counts[token]
+            else:
+                self.statistics['term_metadata'][token] = [1, token_counts[token]]
+
+        self.document_metadata[docid] = {'unique_tokens': len(token_counts), 'length': len(tokens)}
+        self.statistics['total_token_count'] += len(tokens)
+        self.statistics['number_of_documents'] += 1
+        
+
+    def get_postings(self, term: str) -> list[tuple[int, int]]:
+        '''
+        Returns the list of postings, which contains (at least) all the documents that have that term.
+        In most implementation this information is represented as list of tuples where each tuple
+        contains the docid and the term's frequency in that document.
+        
+        Arguments:
+            term [str]: the term to be searched for
+
+        Returns:
+            list[tuple[int,str]] : A list of tuples containing a document id for a document
+            that had that search term and an int value indicating the term's frequency in 
+            the document.
+        '''
+        # TODO implement this to fetch a term's postings from the index
+        if term not in self.index:
+            return []
+        return self.index[term]
+
+    def get_doc_metadata(self, doc_id: int) -> dict[str, int]:
+        '''
+        For the given document id, returns a dictionary with metadata about that document. Metadata
+        should include keys such as the following:
+            "unique_tokens": How many unique tokens are in the document (among those not-filtered)
+            "length": how long the document is in terms of tokens (including those filtered)             
+        '''
+        # TODO implement to fetch a particular documents stored metadata
+        if doc_id in self.document_metadata:
+            return self.document_metadata[doc_id]
+        return {'unique_tokens': 0, 'length': 0}
+
+    def get_term_metadata(self, term: str) -> dict[str, int]:
+        '''
+        For the given term, returns a dictionary with metadata about that term in the index. Metadata
+        should include keys such as the following:
+            "count": How many times this term appeared in the corpus as a whole.          
+        '''        
+        # TODO implement to fetch a particular terms stored metadata
+        if term not in self.statistics['term_metadata']:
+            return {'document_count': 0, 'count': 0}
+        document_count = self.statistics['term_metadata'][term][0]
+        term_frequency = self.statistics['term_metadata'][term][1]
+        return {'document_count': document_count, 'count': term_frequency}
+
+    def get_statistics(self) -> dict[str, int]:
+        '''
+        Returns a dictionary mapping statistical properties (named as strings) about the index to their values.  
+        Keys should include at least the following:
+
+            "unique_token_count": how many unique terms are in the index
+            "total_token_count": how many total tokens are indexed including filterd tokens), 
+                i.e., the sum of the lengths of all documents
+            "stored_total_token_count": how many total tokens are indexed excluding filterd tokens
+            "number_of_documents": the number of documents indexed
+            "mean_document_length": the mean number of tokens in a document (including filter tokens)                
+        '''
+        # TODO calculate statistics like 'unique_token_count', 'total_token_count', 
+        #  'number_of_documents', 'mean_document_length' and any other relevant central statistic.
+        self.statistics['unique_token_count'] = len(self.index)
+        self.statistics['mean_document_length'] = self.statistics['total_token_count']/self.statistics['number_of_documents'] if self.statistics['number_of_documents'] else 0
+        return {'unique_token_count': self.statistics['unique_token_count'], 
+                'total_token_count': self.statistics['total_token_count'], 
+                'stored_total_token_count': self.statistics['stored_total_token_count'], 
+                'number_of_documents': self.statistics['number_of_documents'], 
+                'mean_document_length': self.statistics['mean_document_length']}
+
+    # NOTE: changes in this method for HW2
+    def save(self, index_directory_name) -> None:
+        '''
+        Saves the state of this index to the provided directory. The save state should include the
+        inverted index as well as any meta data need to load this index back from disk
+        '''
+        # TODO save the index files to disk
+        if not os.path.exists(index_directory_name):
+            os.mkdir(index_directory_name)
+        with open(index_directory_name+'/'+'index.json', 'w', encoding='utf-8') as f:
+            json.dump(self.index, f)
+        with open(index_directory_name+'/'+'document_metadata.json', 'w', encoding='utf-8') as f:
+            json.dump(self.document_metadata, f)
+        with open(index_directory_name+'/'+'statistics.json', 'w', encoding='utf-8') as f:
+            json.dump(self.statistics, f)
+        print('Index saved!')
+
+    # NOTE: changes in this method for HW2
+    def load(self, index_directory_name) -> None:
+        '''
+        Loads the inverted index and any associated metadata from files located in the directory.
+        This method will only be called after save() has been called, so the directory should
+        match the filenames used in save()
+        '''
+        # TODO load the index files from disk to a Python object
+        with open(index_directory_name+'/'+'index.json', 'r', encoding='utf-8') as f:
+            self.index = json.load(f)
+        with open(index_directory_name+'/'+'document_metadata.json', 'r', encoding='utf-8') as f:
+            document_metadata = json.load(f)
+            self.document_metadata = {int(k): v for k, v in document_metadata.items()}
+        with open(index_directory_name+'/'+'statistics.json', 'r', encoding='utf-8') as f:
+            self.statistics = json.load(f)
+
+
+class Indexer:
+    """
+    The Indexer class is responsible for creating the index used by the search/ranking algorithm.
+    """
+    @staticmethod
+    def create_index(index_type: IndexType, dataset_path: str,
+                     document_preprocessor: Tokenizer, stopwords: set[str],
+                     minimum_word_frequency: int, text_key="prompt",
+                     max_docs: int = -1, doc_augment_dict: dict[int, list[str]] | None = None) -> InvertedIndex:
+        """
+        Creates an inverted index.
+
+        Args:
+            index_type: This parameter tells you which type of index to create, e.g., BasicInvertedIndex
+            dataset_path: The file path to your dataset
+            document_preprocessor: A class which has a 'tokenize' function which would read each document's text
+                and return a list of valid tokens
+            stopwords: The set of stopwords to remove during preprocessing or 'None' if no stopword filtering is to be done
+            minimum_word_frequency: An optional configuration which sets the minimum word frequency of a particular token to be indexed
+                If the token does not appear in the document at least for the set frequency, it will not be indexed.
+                Setting a value of 0 will completely ignore the parameter.
+            text_key: The key in the JSON to use for loading the text
+            max_docs: The maximum number of documents to index
+                Documents are processed in the order they are seen.
+            doc_augment_dict: An optional argument; This is a dict created from the doc2query.csv where the keys are
+                the document id and the values are the list of queries for a particular document.
+
+        Returns:
+            An inverted index
+        """
+        # TODO (HW3): This function now has an optional argument doc_augment_dict; check README
+       
+        # HINT: Think of what to do when doc_augment_dict exists, how can you deal with the extra information?
+        #       How can you use that information with the tokens?
+        #       If doc_augment_dict doesn't exist, it's the same as before, tokenizing just the document text
+          
+        # TODO: Implement this class properly. This is responsible for going through the documents
+        #       one by one and inserting them into the index after tokenizing the document
+
+        # TODO: Figure out what type of InvertedIndex to create.
+        #       For HW3, only the BasicInvertedIndex is required to be supported
+
+        # TODO: If minimum word frequencies are specified, process the collection to get the
+        #       word frequencies
+
+        # NOTE: Make sure to support both .jsonl.gz and .jsonl as input
+                      
+        # TODO: Figure out which set of words to not index because they are stopwords or
+        #       have too low of a frequency
+
+        # HINT: This homework should work fine on a laptop with 8GB of memory but if you need,
+        #       you can delete some unused objects here to free up some space
+
+        # TODO: Read the collection and process/index each document.
+        #       Only index the terms that are not stopwords and have high-enough frequency
+
+        index = None
+        if index_type == IndexType.InvertedIndex:
+            index = BasicInvertedIndex()
+        else:
+            raise NameError
+        
+
+        filtered_tokens = set()
+        if minimum_word_frequency:
+            word_frequency = Counter()
+            if dataset_path.endswith('jsonl'):
+                with open(dataset_path, 'r', encoding='utf-8') as f:
+                    for i, line in tqdm(enumerate(f)):
+                        if max_docs > 0 and i >= max_docs:
+                            break
+                        docid = json.loads(line)['docid']
+                        doc = json.loads(line)[text_key]
+                        if doc_augment_dict and docid in doc_augment_dict:
+                            doc = ' '.join([doc] + doc_augment_dict[docid])
+                        tokens = document_preprocessor.tokenize(doc)
+                        word_frequency.update(tokens)
+            elif dataset_path.endswith('jsonl.gz'):
+                with gzip.open(dataset_path, 'rt', encoding='utf-8') as f:
+                    for i, line in tqdm(enumerate(f)):
+                        if max_docs > 0 and i >= max_docs:
+                            break
+                        docid = json.loads(line)['docid']
+                        doc = json.loads(line)[text_key]
+                        if doc_augment_dict and docid in doc_augment_dict:
+                            doc = ' '.join([doc] + doc_augment_dict[docid])
+                        tokens = document_preprocessor.tokenize(doc)
+                        word_frequency.update(tokens)
+            else:
+                raise TypeError('Dataset type not supported')
+            for word in word_frequency:
+                if word_frequency[word] < minimum_word_frequency:
+                    filtered_tokens.add(word)
+
+        if stopwords:
+            filtered_tokens |= stopwords
+
+        if dataset_path.endswith('jsonl'):
+            with open(dataset_path, 'r', encoding='utf-8') as f:
+                for i, line in tqdm(enumerate(f)):
+                    if max_docs > 0 and i >= max_docs:
+                        break
+                    docid = json.loads(line)['docid']
+                    doc = json.loads(line)[text_key]
+                    if doc_augment_dict and docid in doc_augment_dict:
+                        doc = ' '.join([doc] + doc_augment_dict[docid])
+                    tokens = document_preprocessor.tokenize(doc)
+                    for j, token in enumerate(tokens):
+                        if token in filtered_tokens:
+                            tokens[j] = None
+                    index.add_doc(docid, tokens)
+        elif dataset_path.endswith('jsonl.gz'):
+            with gzip.open(dataset_path, 'rt', encoding='utf-8') as f:
+                for i, line in tqdm(enumerate(f)):
+                    if max_docs > 0 and i >= max_docs:
+                        break
+                    docid = json.loads(line)['docid']
+                    doc = json.loads(line)[text_key]
+                    if doc_augment_dict and docid in doc_augment_dict:
+                        doc = ' '.join([doc] + doc_augment_dict[docid])
+                    tokens = document_preprocessor.tokenize(doc)
+                    for j, token in enumerate(tokens):
+                        if token in filtered_tokens:
+                            tokens[j] = None
+                    index.add_doc(docid, tokens)
+        index.get_statistics()
+
+        return index

ranker.py

@@ -0,0 +1,259 @@
+"""
+This is the template for implementing the rankers for your search engine.
+You will be implementing WordCountCosineSimilarity, DirichletLM, TF-IDF, BM25, Pivoted Normalization, and your own ranker.
+"""
+from collections import Counter, defaultdict
+from indexing import InvertedIndex
+import math
+
+
+class Ranker:
+    """
+    The ranker class is responsible for generating a list of documents for a given query, ordered by their scores
+    using a particular relevance function (e.g., BM25).
+    A Ranker can be configured with any RelevanceScorer.
+    """
+    # TODO: Implement this class properly; this is responsible for returning a list of sorted relevant documents
+    def __init__(self, index: InvertedIndex, document_preprocessor, stopwords: set[str], scorer: 'RelevanceScorer') -> None:
+        """
+        Initializes the state of the Ranker object.
+
+        TODO (HW3): Previous homeworks had you passing the class of the scorer to this function
+        This has been changed as it created a lot of confusion.
+        You should now pass an instantiated RelevanceScorer to this function.
+
+        Args:
+            index: An inverted index
+            document_preprocessor: The DocumentPreprocessor to use for turning strings into tokens
+            stopwords: The set of stopwords to use or None if no stopword filtering is to be done
+            scorer: The RelevanceScorer object
+        """
+        self.index = index
+        self.tokenize = document_preprocessor.tokenize
+        self.scorer = scorer
+        self.stopwords = stopwords
+
+    def query(self, query: str) -> list[tuple[int, float]]:
+        """
+        Searches the collection for relevant documents to the query and
+        returns a list of documents ordered by their relevance (most relevant first).
+
+        Args:
+            query: The query to search for
+
+        Returns:
+            A list of dictionary objects with keys "docid" and "score" where docid is
+            a particular document in the collection and score is that document's relevance
+
+        TODO (HW3): We are standardizing the query output of Ranker to match with L2RRanker.query and VectorRanker.query
+        The query function should return a sorted list of tuples where each tuple has the first element as the document ID
+        and the second element as the score of the document after the ranking process.
+        """
+        # TODO: Tokenize the query and remove stopwords, if needed
+        tokens = self.tokenize(query)
+        query_parts = [token for token in tokens if token not in self.stopwords] if self.stopwords else tokens
+     
+        # TODO: Fetch a list of possible documents from the index and create a mapping from
+        #       a document ID to a dictionary of the counts of the query terms in that document.
+        #       You will pass the dictionary to the RelevanceScorer as input.
+        doc_word_counts = defaultdict(Counter)
+        query_word_counts = Counter(query_parts)
+        for term in query_word_counts:
+            postings = self.index.get_postings(term)
+            for posting in postings:
+                doc_word_counts[posting[0]][term] = posting[1]
+
+        # TODO: Rank the documents using a RelevanceScorer (like BM25 from below classes) 
+        results = []
+        for docid in doc_word_counts:
+            res = self.scorer.score(docid, doc_word_counts[docid], query_word_counts)
+            if res:
+                results.append((docid, res))
+
+        # TODO: Return the **sorted** results as format [{docid: 100, score:0.5}, {{docid: 10, score:0.2}}]
+        results.sort(key=lambda x: x[1], reverse=True)
+        return results
+
+
+class RelevanceScorer:
+    """
+    This is the base interface for all the relevance scoring algorithm.
+    It will take a document and attempt to assign a score to it.
+    """
+    # TODO: Implement the functions in the child classes (WordCountCosineSimilarity, DirichletLM, BM25,
+    #  PivotedNormalization, TF_IDF) and not in this one
+
+    def __init__(self, index: InvertedIndex, parameters) -> None:
+        raise NotImplementedError
+
+    def score(self, docid: int, doc_word_counts: dict[str, int], query_word_counts: dict[str, int]) -> float:
+        """
+        Returns a score for how relevance is the document for the provided query.
+
+        Args:
+            docid: The ID of the document
+            doc_word_counts: A dictionary containing all words in the document and their frequencies.
+                Words that have been filtered will be None.
+            query_word_counts: A dictionary containing all words in the query and their frequencies.
+                Words that have been filtered will be None.
+
+        Returns:
+            A score for how relevant the document is (Higher scores are more relevant.)
+
+        """
+        raise NotImplementedError
+
+
+# TODO (HW1): Implement unnormalized cosine similarity on word count vectors
+class WordCountCosineSimilarity(RelevanceScorer):
+    def __init__(self, index: InvertedIndex, parameters={}) -> None:
+        self.index = index
+        self.parameters = parameters
+
+    def score(self, docid: int, doc_word_counts: dict[str, int], query_word_counts: dict[str, int]) -> float:
+        # 1. Find the dot product of the word count vector of the document and the word count vector of the query
+
+        # 2. Return the score
+        cwq = query_word_counts
+        score = 0
+        flag = 0
+        for word in cwq:
+            if word in doc_word_counts:
+                flag = 1
+                score += cwq[word] * doc_word_counts[word]
+        if not flag:
+            return None
+        return score 
+
+
+# TODO (HW1): Implement DirichletLM
+class DirichletLM(RelevanceScorer):
+    def __init__(self, index: InvertedIndex, parameters={'mu': 2000}) -> None:
+        self.index = index
+        self.parameters = parameters
+        self.mu = parameters['mu']
+
+    def score(self, docid: int, doc_word_counts: dict[str, int], query_word_counts: dict[str, int]) -> float:
+        # 1. Get necessary information from index
+
+        # 2. Compute additional terms to use in algorithm
+
+        # 3. For all query_parts, compute score
+
+        # 4. Return the score
+        cwq = query_word_counts
+        q_len = sum(cwq.values())
+        flag = 0
+        score = 0
+        
+        for term in cwq:
+            if term in doc_word_counts and docid in self.index.document_metadata:
+                flag = 1
+                pwc = self.index.get_term_metadata(term)['count']/self.index.statistics['total_token_count']
+                first_part = cwq[term]*math.log(1+doc_word_counts[term]/(self.mu*pwc))
+                score+=first_part
+        if docid in self.index.document_metadata:
+            second_part = q_len*math.log(self.mu/(self.mu+self.index.document_metadata[docid]['length']))
+            score+=second_part
+        if not flag:
+            return None
+        return score
+
+
+# TODO (HW1): Implement BM25
+class BM25(RelevanceScorer):
+    def __init__(self, index: InvertedIndex, parameters={'b': 0.75, 'k1': 1.2, 'k3': 8}) -> None:
+        self.index = index
+        self.b = parameters['b']
+        self.k1 = parameters['k1']
+        self.k3 = parameters['k3']
+
+    def score(self, docid: int, doc_word_counts: dict[str, int], query_word_counts: dict[str, int])-> float:
+        # 1. Get necessary information from index
+
+        # 2. Find the dot product of the word count vector of the document and the word count vector of the query
+
+        # 3. For all query parts, compute the TF and IDF to get a score
+
+        # 4. Return score
+        cwq = query_word_counts
+        info = self.index.statistics # statistics
+        avg_dl = info['mean_document_length']
+        N = info['number_of_documents']
+        score = 0
+        flag = 0
+        for term in cwq:
+            if term in doc_word_counts and docid in self.index.document_metadata:
+                flag = 1
+                third_part = cwq[term]*(self.k3+1)/(self.k3+cwq[term])
+                first_part = math.log((N+0.5-self.index.get_term_metadata(term)['document_count'])\
+                                      /(self.index.get_term_metadata(term)['document_count']+0.5))
+                ctd = doc_word_counts[term]
+                second_part = ((self.k1+1)*ctd)\
+                    /(self.k1*(1-self.b+self.b*self.index.document_metadata[docid]['length']/avg_dl)+ctd)
+                score+=first_part*second_part*third_part
+        if not flag:
+            return None
+        return score
+
+
+# TODO (HW1): Implement Pivoted Normalization
+class PivotedNormalization(RelevanceScorer):
+    def __init__(self, index: InvertedIndex, parameters={'b': 0.2}) -> None:
+        self.index = index
+        self.b = parameters['b']
+
+    def score(self, docid: int, doc_word_counts: dict[str, int], query_word_counts: dict[str, int]) -> float:
+        # 1. Get necessary information from index
+
+        # 2. Compute additional terms to use in algorithm
+
+        # 3. For all query parts, compute the TF, IDF, and QTF values to get a score
+
+        # 4. Return the score
+        cwq = query_word_counts
+        info = self.index.statistics # statistics
+        avg_dl = info['mean_document_length']
+        N = info['number_of_documents']
+        score = 0
+        flag = 0
+        for term in cwq:
+            if term in doc_word_counts and docid in self.index.document_metadata:
+                flag = 1
+                first_part = cwq[term]
+                third_part = math.log((N+1)/self.index.get_term_metadata(term)['document_count'])
+                second_part = (1+math.log(1+math.log(doc_word_counts[term])))\
+                    /(1-self.b+self.b*self.index.document_metadata[docid]['length']/avg_dl)
+                # print(first_part, second_part, third_part)
+                score+=first_part*second_part*third_part
+        if not flag:
+            return None
+        return score
+
+
+# TODO (HW1): Implement TF-IDF
+class TF_IDF(RelevanceScorer):
+    def __init__(self, index: InvertedIndex, parameters={}) -> None:
+        self.index = index
+        self.parameters = parameters
+
+    def score(self, docid: int, doc_word_counts: dict[str, int], query_word_counts: dict[str, int]) -> float:
+        # 1. Get necessary information from index
+
+        # 2. Compute additional terms to use in algorithm
+
+        # 3. For all query parts, compute the TF, IDF, and QTF values to get a score
+
+        # 4. Return the score
+        cwq = query_word_counts
+        doc_total = self.index.statistics['number_of_documents']  # statistics
+        score = 0
+        flag = 0
+        for term in cwq:
+            if term in doc_word_counts:
+                flag = 1
+                score += math.log(doc_word_counts[term]+1)*\
+                    (1+math.log(doc_total/(self.index.get_term_metadata(term)['document_count'])))*cwq[term]
+        if not flag:
+            return None
+        return score

requirements.txt

@@ -0,0 +1,17 @@
+blinker==1.7.0
+click==8.1.7
+Flask==3.0.0
+itsdangerous==2.1.2
+Jinja2==3.1.2
+joblib==1.3.2
+MarkupSafe==2.1.3
+nltk==3.8.1
+numpy==1.26.2
+pandas==2.1.4
+python-dateutil==2.8.2
+pytz==2023.3.post1
+regex==2023.10.3
+six==1.16.0
+tqdm==4.66.1
+tzdata==2023.3
+Werkzeug==3.0.1

static/css/style_index.css

@@ -0,0 +1,38 @@
+#search-header{
+    margin-top: 15%;
+    margin-bottom: 15%;
+    display: block;
+}
+
+#introduce-header {
+    /* margin-top: 10%; */
+    /* margin-bottom: 5%; */
+    margin: 5% auto;
+}
+
+#introduce-header p{
+    font-family: "Special Elite", "SF Pro Display", "SF Pro Icons","Helvetica Neue", Helvetica, Arial, sans-serif;
+    margin-top: 3%;
+}
+
+.results-wrapper{
+    position: relative;
+    animation: moveRightToLeft 1000s linear infinite;
+    display: grid;
+    grid-template-columns: repeat(100, 30%);
+    grid-template-rows: 1fr;
+    grid-auto-flow: row;
+}
+
+@keyframes moveRightToLeft {
+    0% {
+      left: 1000%; 
+    }
+    100% {
+      left: -1000%; 
+    }
+}
+
+.results-wrapper:hover{
+    animation-play-state: paused;
+}

static/css/style_search.css

@@ -0,0 +1,384 @@
+html {
+    background-color: #fbfbfb;
+}
+body {
+    background-color: #fbfbfb;
+    font-family: "SF Pro Display", "SF Pro Icons","Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-weight: 600;
+    line-height: 1.1;
+    /* position: relative; */
+}
+
+nav {
+    background-color: rgba(255, 255, 255, 0.8);
+    backdrop-filter: saturate(180%) blur(20px);
+    width: 100%;
+    /* position: sticky; */
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    padding: 15px 0px;
+    border-bottom: rgb(222, 222, 222) 1px solid;
+}
+
+main{
+    padding: 1% 5%;
+    background-color: #fbfbfb;
+}
+
+#nav-title{
+    font-size: 21px;
+    margin-left: 50px;
+    font-family: Silkscreen, "Special Elite", "SF Pro Display", "SF Pro Icons","Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+#nav-title a{
+    text-decoration: none;
+    color: inherit;
+}
+
+#nav-title a:hover{
+    color: #565564;
+}
+
+
+h1{
+    text-align: center;
+    font-weight: 600;
+    font-family: "DM Serif Display", Silkscreen, "Special Elite", "SF Pro Display", "SF Pro Icons","Helvetica Neue", Helvetica, Arial, sans-serif;;
+}
+
+#search-header{
+    text-align: center;
+    width: 100%;
+    /* margin-top: 5%; */
+    /* margin-bottom: 5%; */
+    margin: 5% auto;
+    align-items: center;
+    animation: fadeIn;
+    animation-duration: 1s;
+}
+
+#search-bar{
+    width: 100%;
+    /* display: flex; */
+    /* box-shadow: 2px 4px 12px rgba(0 0 0/0.08); */
+    border-radius: 30px;
+    /* align-items: center; */
+    /* background-color: white; */
+    margin: 0 auto;
+}
+
+/* #search-bar:hover{
+    box-shadow: 8px 8px 16px rgba(0 0 0/0.1);
+} */
+
+#input-wrapper{
+    display: flex;
+    align-items: center;
+    background-color: white;
+    border-radius: 30px;
+    box-shadow: 2px 4px 12px rgba(0 0 0/0.08);
+    width: 50vw;
+}
+
+#input-wrapper:hover{
+    box-shadow: 8px 8px 16px rgba(0 0 0/0.1);
+}
+
+#icon-magnifying-glass{
+    margin-left: 3%;
+}
+
+#input-wrapper-filter{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 5% 0;
+}
+
+#icon-filter:hover{
+    opacity: 0.6;
+}
+
+#search-header{
+    display: flex;
+}
+
+#search-header form{
+    width: 100%;
+    /* border-radius: 30px; */
+}
+
+#search-header input{
+    width: 100%;
+    height: 50px;
+    border: none;
+    /* box-shadow: 2px 4px 12px rgba(0 0 0/0.08); */
+    border-radius: 0 30px 30px 0;
+    padding: 25px 25px 25px 15px;
+    background-color: white;
+}
+
+#search-header input:focus{
+    outline: none;
+}
+
+#icon-filter{
+    margin-left: 3%;
+    cursor: pointer;
+}
+
+.multiselect-single-wrapper{
+    display: flex;
+    align-items: center;
+    width: 95%;
+    /* flex: 0 0 20vw; */
+    /* margin: 10px 5%; */
+    /* z-index: 0; */
+}
+
+.multiselect-single-wrapper:nth-child(1){
+    grid-column: 1 / span 3;
+}
+
+.multiselect-single-wrapper:nth-child(2){
+    grid-column: 4 / span 3;
+
+}
+
+.multiselect-single-wrapper:nth-child(3){
+    grid-column: 1 / span 3;
+}
+
+.multiselect-single-wrapper:nth-child(4){
+    grid-column: 4 / span 3;
+}
+
+.multiselect-single-wrapper:nth-child(5){
+    grid-column: 2 / -2;
+}
+
+.multiselect-single-wrapper label{
+    margin: 0 5%;
+}
+
+.multiselect-single-wrapper>div:first-of-type{
+    width: 100%;
+}
+
+.ui.multiple.selection.dropdown{
+    border-radius: 20px;
+    border: none;
+    background-color: white;
+    box-shadow: 2px 4px 12px rgba(0 0 0/0.08);
+    padding: 5px 15px;
+    width: 100%;
+}
+
+.ui.multiple.selection.dropdown:hover{
+    box-shadow: 8px 8px 16px rgba(0 0 0/0.1);;
+}
+
+.ui.selection.active.dropdown .menu{
+    border: none;
+}
+
+.ui.label.transition.visible{
+    border: none;
+    background-color: rgba(0,0,0,.87);
+    color: whitesmoke;
+    border-radius: 30px;
+    box-shadow: 2px 4px 12px rgba(0 0 0/0.08);
+}
+
+#multiselect-wrapper{
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    row-gap: 25px;
+    width: 95%;
+    justify-content: space-evenly;
+    justify-items: center;
+    padding: 0;
+    overflow: hidden;
+    max-height: 0;
+    /* display: none; */
+    transition: max-height 0.3s linear, padding 0.3s linear;
+    /* animation: fadeOutUp; */
+    /* animation-duration: 0.7s; */
+  }
+
+#search-bar.open  #multiselect-wrapper{
+    /* display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    row-gap: 25px;
+    width: 100%;
+    justify-content: space-evenly;
+    justify-items: center; */
+    padding: 2% 0% 2% 0%;
+    overflow: visible;
+    max-height: 500px;
+    transition: max-height 0.3s linear, padding 0.3s linear;
+    animation: fadeInDown;
+    animation-duration: 0.3s;
+    /* z-index: 2; */
+}
+
+
+.results-wrapper {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    /* grid-template-rows: 400px; */
+    grid-auto-flow: dense;
+    grid-gap: 25px;
+    /* grid-row-gap: 20px; */
+    /* margin-top: 50px; */
+    justify-content: center;
+    justify-items: center;
+    /* z-index: 0; */
+    /* background-color: #fbfbfb; */
+}
+
+.single-result-card {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 2fr 1fr;
+    background-color: white;
+    border-radius: 30px;
+    box-shadow: 2px 4px 12px rgba(0 0 0/0.08);
+    width: 80%;
+    box-sizing: border-box;
+    transition: transform 0.5s;
+    height: 30vw;
+}
+
+.single-result-card:hover{
+    transform: translateY(-10px);
+}
+
+.single-result-card img{
+    grid-row: 1 / span 2;
+    grid-column: 1 / span 1;
+    width: 100%;
+    height: 100%;
+    /* max-height: 400px; */
+    border-radius: 30px 30px 0 0;
+    object-fit: cover;
+}
+
+.prompt-text-wrapper{
+    grid-row: 1 / span 2;
+    grid-column: 1 / span 1;
+    /* z-index: 1; */
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    text-align: center;
+    /* font-style: italic; */
+    height: 100%;
+    /* max-height: 30px; */
+    overflow: hidden;
+    text-overflow: clip;
+    /* color: #75757d; */
+    font-weight: 400;
+    font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue",Helvetica, Arial, sans-serif;
+    color: whitesmoke;
+    /* background-color: rgba(50, 50, 50, 0.7); */
+    /* border-radius: 30px 30px 0 0; */    
+    border-radius: 30px 30px 0 0;
+
+}
+
+.prompt-text-wrapper:hover{
+    background: linear-gradient(to top, rgba(50, 50, 50, 0.5) 5%, transparent);
+    /* background-color: rgba(50, 50, 50, 0.7); */
+    /* cursor: pointer; */
+}
+
+/* .prompt-text-wrapper.copied{
+    background-color: rgba(50, 50, 50, 0.7);
+    transition: background-color 0.1s ease;
+} */
+
+
+.prompt-text-wrapper p {
+    display: none;
+}
+
+.prompt-text-wrapper:hover p{
+    display: block;
+    padding: 15px;
+    /* padding-bottom: 15px; */
+    /* padding: 15px 15px 60px 15px; */
+    /* height: auto; */
+    max-height: 30%;
+    /* overflow: hidden; */
+    text-overflow: ellipsis;
+    /* background-color: rgba(50, 50, 50, 0.7); */
+    border-radius: 30px 30px 0 0;
+    /* transition: height 0.5s ease; */
+    width: 100%;
+    margin: 0;
+    margin-bottom: 2%;
+}
+
+/* color see here:
+https://colorhunt.co/palette/ff90bcffc0d9f9f9e08acdd7 
+*/
+
+.single-result-card form{
+    width: 100%;    
+    display: flex;
+    grid-row: 4 / span 1;
+    text-align: center;
+}
+
+.single-result-card input[type="submit"]{
+    border-radius: 0 0 0 30px;
+    background-color: #FF90BC;
+    color: white;
+    font-weight: 600;
+    padding: 15px;
+    display: inline-block;
+    box-sizing: border-box;
+    width: 50%;
+    margin: 0;
+    border: none;
+    flex-direction: row;
+}
+
+.single-result-card input[type="submit"]:hover{
+    opacity: 0.8;
+}
+
+.pick-this{
+    /* display: inline-block; */
+    display: flex;
+    flex-direction: row;
+    padding: 15px;
+    align-items: center;
+    color: white;
+    background-color: #8ACDD7;
+    border-radius: 0 0 30px 0;
+    box-sizing: border-box;
+    width: 50%;
+    cursor: pointer;
+    margin: 0;
+    user-select: none;
+    justify-content: space-evenly;
+    transition: background-color 0.1s ease;
+}
+
+.pick-this:hover{
+    background-color: rgba(138, 205, 215, 0.8);
+}
+
+.pick-this.copied{
+    background-color: rgb(30, 48, 80);
+    transition: background-color 0.1s ease;
+}
+
+#no-results{
+    grid-column: 1 / -1;
+}

static/js/script.js

@@ -0,0 +1,83 @@
+// delete images on error
+const images = document.querySelectorAll("img");
+
+images.forEach(function (image) {
+    image.addEventListener("error", function () {
+        console.error("Image load error:", image.src);
+        console.log("404 image:", image.src);
+        const parentElement = image.parentElement;
+        if (parentElement) {
+            console.log("parentElement:", parentElement);
+            parentElement.remove();
+            console.log("image removed");
+        }
+    });
+});
+
+// multiselect dropdown
+const myForm = document.getElementById("myForm");
+
+$(".ui.multiple.selection.dropdown").dropdown({
+    action: "activate",
+    onChange: function (value, text, $selectedItem) {
+        console.log(value);
+        myForm.submit();
+    },
+});
+
+// switch filter dropdown on
+const filterSwitch = document.getElementById("icon-filter");
+const filterContent = document.getElementById("multiselect-wrapper");
+if (filterSwitch) {
+    filterSwitch.addEventListener("click", function () {
+        const wrapper = this.closest("#search-bar");
+        wrapper.classList.toggle("open");
+    });
+}
+
+// copy to clipboard
+const copyButtons = document.querySelectorAll(".pick-this");
+copyButtons.forEach(function (button) {
+    button.addEventListener("click", function () {
+        console.log("copy button clicked");
+        const text =
+            this.parentNode.parentNode.querySelector(
+                ".prompt-text-p"
+            ).textContent;
+        navigator.clipboard.writeText(text).then(
+            () => {
+                console.log("Copied to clipboard:", text);
+                this.classList.add("copied");
+                setTimeout(() => {
+                    this.classList.remove("copied");
+                }, 200);
+            },
+            function (err) {
+                console.error("Async: Could not copy text: ", err);
+            }
+        );
+    });
+});
+
+// const copyButtons_2 = document.querySelectorAll(".prompt-text-wrapper");
+// copyButtons_2.forEach(function (button) {
+//     button.addEventListener("click", function () {
+//         console.log("copy button clicked");
+//         const text =
+//             this.parentNode.parentNode.querySelector(
+//                 ".prompt-text-p"
+//             ).textContent;
+//         navigator.clipboard.writeText(text).then(
+//             () => {
+//                 console.log("Copied to clipboard:", text);
+//                 this.classList.add("copied");
+//                 setTimeout(() => {
+//                     this.classList.remove("copied");
+//                 }, 200);
+//             },
+//             function (err) {
+//                 console.error("Async: Could not copy text: ", err);
+//             }
+//         );
+//     });
+// });

templates/base_head.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        
+        <link
+            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+            rel="stylesheet"
+            integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
+            crossorigin="anonymous"
+        />
+        <script
+            src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim"
+            crossorigin="anonymous"
+        ></script>
+        
+        <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Special+Elite%7CSilkscreen%7CDM+Serif+Display"
+        />
+        <link
+            rel="stylesheet"
+            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css"
+        />
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+        />
+        <link
+            rel="icon"
+            href="static/src/wand-magic-sparkles-solid.svg"
+            type="image/x-icon"
+        />
+
+        <!--- Seo Part-->
+        <link rel="canonical" href="magic-prompt.net" />
+        <meta name="robots" content="index,follow" />
+        <meta name="googlebot" content="index,follow" />
+        <meta name="revisit-after" content="1 days" />
+
+        <meta property="og:type" content="website" />
+        <meta
+            property="og:title"
+            content="Magic Prompt - Explore the Best AI Image Generating Prompts"
+        />
+        <meta property="og:url" content="magic-prompt.net" />
+        <meta
+            property="og:site_name"
+            content="Magic Prompt - Explore the Best AI Image Generating Prompts"
+        />
+        <meta property="og:locale" content="en_US" />
+        <meta property="article:author" content="[email protected]" />
+        <meta name="twitter:card" content="summary" />
+        <meta
+            name="description"
+            content="Explore diverse AI image prompts on
+        our site. Search by style and preferences for personalized inspiration.
+        Find similar prompts to further tailor your creative journey! 在我们的网站上，您可以探索多样的AI图像生成提示。支持按风格搜索，根据喜好查找类似提示，为您的创意之旅定制个性化的灵感。"
+        />
+        <!-- baidu -->
+        <meta name="baidu-site-verification" content="codeva-2ptCyPDL5z" />
+
+        <!-- Google tag (gtag.js) -->
+        <script src="https://www.googletagmanager.com/gtag/js?id=G-FNS66H6NJY"></script>
+        <script>
+            window.dataLayer = window.dataLayer || [];
+            function gtag() {
+                dataLayer.push(arguments);
+            }
+            gtag("js", new Date());
+
+            gtag("config", "G-FNS66H6NJY");
+        </script>
+        <title>
+            Magic Prompt - Explore the best AI Image Generating Prompts
+        </title>
+    </head>
+</html>

templates/index.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+    {% include "base_head.html"%}
+
+    <head>
+        <link
+            rel="stylesheet"
+            href="static/css/style_search.css"
+            type="text/css"
+        />
+        <link
+            rel="stylesheet"
+            href="static/css/style_index.css"
+            type="text/css"
+        />
+    </head>
+
+    <body>
+        <nav>
+            <div id="nav-title"><a href="/">Magic Prompt</a></div>
+        </nav>
+
+        <main>
+            <div id="search-header">
+                <div id="introduce-header">
+                    <h1>Explore the world's best AIGC prompts.</h1>
+                    <p>Prefer. Search again. No end.</p>
+                </div>
+                <form action="/search_picture" method="post" enctype="multipart/form-data"><input type="file" id="img" name="img"><button type="submit">submit</button></form>
+                
+
+                <div id="search-bar">
+                    <form action="/search" method="POST" id="myForm">
+                        <div id="input-wrapper-filter">
+                            <div id="input-wrapper">
+                                <img
+                                    src="static/src/magnifying-glass-solid.svg"
+                                    alt="search icon"
+                                    width="15"
+                                    height="15"
+                                    id="icon-magnifying-glass"
+                                />
+                                <input
+                                    type="text"
+                                    name="query"
+                                    placeholder="A mountain in spring"
+                                    value="{{query}}"
+                                />
+                            </div>
+                        </div>
+                        <!-- <input type="submit" value="submit" /> -->
+                    </form>
+                </div>
+            </div>
+
+            <div class="results-wrapper">
+                {% for value in result %}
+                <div class="single-result-card">
+                    <img src="{{ value[1] }}" alt="Image" />
+                    <div class="prompt-text-wrapper">
+                        <p class="prompt-text-p">{{ value[0] }}</p>
+                    </div>
+                    <form action="/search" method="POST">
+                        <input
+                            type="hidden"
+                            name="query"
+                            value="{{ value[0] }}"
+                        />
+                        <!-- <input type="hidden" name="query" value="{{ value[2] }}" /> -->
+                        <!-- <input type="hidden" name="title" value="{{ value[0] }}" /> -->
+                        <input type="submit" value="Find Similar" />
+                        <div class="pick-this">
+                            <span>Copy</span>
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                height="16"
+                                width="14"
+                                viewBox="0 0 448 512"
+                                class="icon-copy"
+                            >
+                                <path
+                                    d="M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z"
+                                    fill="white"
+                                />
+                            </svg>
+                        </div>
+                    </form>
+                </div>
+                {% endfor %}
+            </div>
+        </main>
+        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
+        <script src="static/js/script.js"></script>
+    </body>
+</html>

templates/search.html

@@ -0,0 +1,857 @@
+<!DOCTYPE html>
+<html lang="en">
+    
+    
+    {% include "base_head.html"%}
+
+    <head>
+        <link
+            rel="stylesheet"
+            href="static/css/style_search.css"
+            type="text/css"
+        />
+    </head>
+
+    <body>
+        <nav>
+            <div id="nav-title"><a href="/">Magic Prompt</a></div>
+        </nav>
+
+        <main>
+            <div id="search-header">
+            {% if style or scene or medium or light or quality %}
+                <div id="search-bar" class="open">
+            {% else %}
+                <div id="search-bar">
+            {% endif %}
+                    <form action="/search" method="POST" id="myForm">
+                        <div id="input-wrapper-filter">
+                            <div id="input-wrapper">
+                                <img
+                                    src="static/src/magnifying-glass-solid.svg"
+                                    alt="search icon"
+                                    width="15"
+                                    height="15"
+                                    id="icon-magnifying-glass"
+                                />
+                                <input
+                                    type="text"
+                                    name="query"
+                                    placeholder="A mountain in spring"
+                                    value="{{query}}"
+                                />
+                            </div>
+                            <img
+                                src="static/src/filter.svg"
+                                alt="search icon"
+                                width="15"
+                                height="15"
+                                id="icon-filter"
+                            />
+                        </div>
+                        <!-- <input type="submit" value="submit" /> -->
+
+                        <div id="multiselect-wrapper">
+                            <!-- multiselect for style-->
+                            <div class="multiselect-single-wrapper">
+                                <label for="style">Style</label>
+                                <div id="multiselect-style">
+                                    <div
+                                        class="ui multiple selection dropdown"
+                                        id="style-select"
+                                    >
+                                        {% if style %}
+                                        <input
+                                            name="style"
+                                            type="hidden"
+                                            value="{{ style }}"
+                                        />
+                                        <i class="dropdown icon"></i>
+                                        {% for s in style.split(',') %}
+                                        <div
+                                            class="ui label transition visible"
+                                            data-value="{{ s }}"
+                                            style="
+                                                display: inline-block !important;
+                                            "
+                                        >
+                                            {{ s }}<i class="delete icon"></i>
+                                        </div>
+                                        {% endfor %} {% else %}
+                                        <input
+                                            name="style"
+                                            type="hidden"
+                                            value=""
+                                        />
+                                        <i class="dropdown icon"></i>
+                                        {% endif %}
+                                        <div class="default text">
+                                            Choose a style.
+                                        </div>
+                                        <div class="menu">
+                                            <div
+                                                class="item"
+                                                data-value="comics"
+                                            >
+                                                Comics
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="dreamworks"
+                                            >
+                                                Dreamworks
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="pixar"
+                                            >
+                                                Pixar
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="realism"
+                                            >
+                                                Realism
+                                            </div>
+                                            <div class="item" data-value="90s">
+                                                90s
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="bauhaus"
+                                            >
+                                                Bauhaus
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="country"
+                                            >
+                                                Country
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="steampunk"
+                                            >
+                                                Steampunk
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="gothic"
+                                            >
+                                                Gothic
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="baroque"
+                                            >
+                                                Baroque
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="fauvism"
+                                            >
+                                                Fauvism
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="surrealism"
+                                            >
+                                                Surrealism
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="optical"
+                                            >
+                                                Optical
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="pokemon"
+                                            >
+                                                Pokemon
+                                            </div>
+                                            <div class="item" data-value="botw">
+                                                BotW
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="ghibli"
+                                            >
+                                                Ghibli
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="miyazaki"
+                                            >
+                                                Miyazaki
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="doodle"
+                                            >
+                                                Doodle
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="concept"
+                                            >
+                                                Concept
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="portrait"
+                                            >
+                                                Portrait
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="sketching"
+                                            >
+                                                Sketching
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="cinematic"
+                                            >
+                                                Cinematic
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="hyperrealism"
+                                            >
+                                                Hyperrealism
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="sophisticated"
+                                            >
+                                                Sophisticated
+                                            </div>
+                                            <div class="item" data-value="3d">
+                                                3D
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="voynich-manuscript"
+                                            >
+                                                Voynich Manuscript
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="partial-anatomy"
+                                            >
+                                                Partial Anatomy
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="quilted"
+                                            >
+                                                Quilted
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="digital"
+                                            >
+                                                Digital
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="video"
+                                            >
+                                                Video
+                                            </div>
+                                            <div class="item" data-value="game">
+                                                Game
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="photo"
+                                            >
+                                                Photo
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="cartoon"
+                                            >
+                                                Cartoon
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="painting"
+                                            >
+                                                Painting
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="chinese"
+                                            >
+                                                Chinese
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="cyberpunk"
+                                            >
+                                                Cyberpunk
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="fashion"
+                                            >
+                                                Fashion
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="design"
+                                            >
+                                                Design
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="modern"
+                                            >
+                                                Modern
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- multiselect for medium-->
+                            <div class="multiselect-single-wrapper">
+                                <label for="medium">Medium</label>
+                                <div id="multiselect-medium">
+                                    <div
+                                        class="ui multiple selection dropdown"
+                                        id="medium-select"
+                                    >
+                                        {% if medium %}
+                                        <input
+                                            name="medium"
+                                            type="hidden"
+                                            value="{{ medium }}"
+                                        />
+                                        <i class="dropdown icon"></i>
+                                        {% for m in medium.split(',') %}
+                                        <div
+                                            class="ui label transition visible"
+                                            data-value="{{ m }}"
+                                            style="
+                                                display: inline-block !important;
+                                            "
+                                        >
+                                            {{ m }}<i class="delete icon"></i>
+                                        </div>
+                                        {% endfor %} {% else %}
+                                        <input
+                                            name="medium"
+                                            type="hidden"
+                                            value=""
+                                        />
+                                        <i class="dropdown icon"></i>
+                                        {% endif %}
+                                        <div class="default text">
+                                            Choose a medium.
+                                        </div>
+                                        <div class="menu">
+                                            <div
+                                                class="item"
+                                                data-value="illustrations"
+                                            >
+                                                Illustrations
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="vector"
+                                            >
+                                                Vector
+                                            </div>
+                                            <div class="item" data-value="oil">
+                                                Oil
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="photography"
+                                            >
+                                                Photography
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="watercolor"
+                                            >
+                                                Watercolor
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="sketch"
+                                            >
+                                                Sketch
+                                            </div>
+                                            <div class="item" data-value="ink">
+                                                Ink
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="sculpture"
+                                            >
+                                                Sculpture
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="manuscript"
+                                            >
+                                                Manuscript
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="painting"
+                                            >
+                                                Painting
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="drawing"
+                                            >
+                                                Drawing
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- multiselect for light-->
+                            <div class="multiselect-single-wrapper">
+                                <label for="light">Light</label>
+                                <div id="multiselect-light">
+                                    <div
+                                        class="ui multiple selection dropdown"
+                                        id="light-select"
+                                    >
+                                        {% if light %}
+                                        <input
+                                            name="light"
+                                            type="hidden"
+                                            value="{{ light }}"
+                                        />
+                                        <i class="dropdown icon"></i>
+                                        {% for l in light.split(',') %}
+                                        <div
+                                            class="ui label transition visible"
+                                            data-value="{{ l }}"
+                                            style="
+                                                display: inline-block !important;
+                                            "
+                                        >
+                                            {{ l }}<i class="delete icon"></i>
+                                        </div>
+                                        {% endfor %} {% else %}
+                                        <input
+                                            name="light"
+                                            type="hidden"
+                                            value=""
+                                        />
+                                        <i class="dropdown icon"></i>
+                                        {% endif %}
+                                        <div class="default text">
+                                            Choose a light.
+                                        </div>
+                                        <div class="menu">
+                                            <div
+                                                class="item"
+                                                data-value="moody"
+                                            >
+                                                Moody
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="studio"
+                                            >
+                                                Studio
+                                            </div>
+                                            <div class="item" data-value="cove">
+                                                Cove
+                                            </div>
+                                            <div class="item" data-value="soft">
+                                                Soft
+                                            </div>
+                                            <div class="item" data-value="hard">
+                                                Hard
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="volumetric"
+                                            >
+                                                Volumetric
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="low-key"
+                                            >
+                                                Low-key
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="high-key"
+                                            >
+                                                High-key
+                                            </div>
+                                            <div class="item" data-value="epic">
+                                                Epic
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="rembrandt"
+                                            >
+                                                Rembrandt
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="contre-jour"
+                                            >
+                                                Contre-jour
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="veiling-flare"
+                                            >
+                                                Veiling Flare
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="crepuscular"
+                                            >
+                                                Crepuscular
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="rays-of-shimmering"
+                                            >
+                                                Rays of Shimmering
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="godrays"
+                                            >
+                                                Godrays
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- multiselect for quality-->
+                            <div class="multiselect-single-wrapper">
+                                <label for="quality">Quality</label>
+                                <div id="multiselect-quality">
+                                    <div
+                                        class="ui multiple selection dropdown"
+                                        id="quality-select"
+                                    >
+                                        {% if quality %}
+                                        <input
+                                            name="quality"
+                                            type="hidden"
+                                            value="{{ quality }}"
+                                        />
+                                        <i class="dropdown icon"></i>
+                                        {% for q in quality.split(',') %}
+                                        <div
+                                            class="ui label transition visible"
+                                            data-value="{{ q }}"
+                                            style="
+                                                display: inline-block !important;
+                                            "
+                                        >
+                                            {{ q }}<i class="delete icon"></i>
+                                        </div>
+                                        {% endfor %} {% else %}
+                                        <input
+                                            name="quality"
+                                            type="hidden"
+                                            value=""
+                                        />
+                                        <i class="dropdown icon"></i>
+                                        {% endif %}
+                                        <div class="default text">
+                                            Choose a quality.
+                                        </div>
+                                        <div class="menu">
+                                            <div class="item" data-value="16k">
+                                                16K
+                                            </div>
+                                            <div class="item" data-value="8k">
+                                                8K
+                                            </div>
+                                            <div class="item" data-value="4k">
+                                                4K
+                                            </div>
+                                            <div class="item" data-value="2k">
+                                                2K
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="high-resolution"
+                                            >
+                                                High Resolution
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="low-resolution"
+                                            >
+                                                Low Resolution
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="high-quality"
+                                            >
+                                                High Quality
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="low-quality"
+                                            >
+                                                Low Quality
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- multiselect for scene-->
+                            <div class="multiselect-single-wrapper">
+                                <label for="scene">Scene</label>
+                                <div id="multiselect-scene">
+                                    <div
+                                        class="ui multiple selection dropdown"
+                                        id="scene-select"
+                                    >
+                                        {% if scene %}
+                                        <input
+                                            name="scene"
+                                            type="hidden"
+                                            value="{{ scene }}"
+                                        />
+                                        <i class="dropdown icon"></i>
+                                        {% for s in scene.split(',') %}
+                                        <div
+                                            class="ui label transition visible"
+                                            data-value="{{ s }}"
+                                            style="
+                                                display: inline-block !important;
+                                            "
+                                        >
+                                            {{ s }}<i class="delete icon"></i>
+                                        </div>
+                                        {% endfor %} {% else %}
+                                        <input
+                                            name="scene"
+                                            type="hidden"
+                                            value=""
+                                        />
+                                        <i class="dropdown icon"></i>
+                                        {% endif %}
+                                        <div class="default text">
+                                            Choose a scene.
+                                        </div>
+                                        <div class="menu">
+                                            <div
+                                                class="item"
+                                                data-value="utopia"
+                                            >
+                                                Utopia
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="fantasy"
+                                            >
+                                                Fantasy
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="whimsically"
+                                            >
+                                                Whimsically
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="deserted"
+                                            >
+                                                Deserted
+                                            </div>
+                                            <div class="item" data-value="city">
+                                                City
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="street"
+                                            >
+                                                Street
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="universe"
+                                            >
+                                                Universe
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="morning"
+                                            >
+                                                Morning
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="sunlight"
+                                            >
+                                                Sunlight
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="galaxy"
+                                            >
+                                                Galaxy
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="dungeon"
+                                            >
+                                                Dungeon
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="nebula"
+                                            >
+                                                Nebula
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="garden"
+                                            >
+                                                Garden
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="babylon"
+                                            >
+                                                Babylon
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="meadow"
+                                            >
+                                                Meadow
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="nature"
+                                            >
+                                                Nature
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="apocalyptic"
+                                            >
+                                                Apocalyptic
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="castle"
+                                            >
+                                                Castle
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="forest"
+                                            >
+                                                Forest
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="ruins"
+                                            >
+                                                Ruins
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="classroom"
+                                            >
+                                                Classroom
+                                            </div>
+                                            <div class="item" data-value="city">
+                                                City
+                                            </div>
+                                            <div class="item" data-value="rain">
+                                                Rain
+                                            </div>
+                                            <div class="item" data-value="sky">
+                                                Sky
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="geography"
+                                            >
+                                                Geography
+                                            </div>
+                                            <div
+                                                class="item"
+                                                data-value="architectural"
+                                            >
+                                                Architectural
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+
+                <!-- <h1>Discover better prompts about "{{query}}"</h1> -->
+            </div>
+
+            <div class="results-wrapper">
+                {% if not result %}
+                <p id="no-results">
+                    Sorry, no results. Try adjusting your selected filters to
+                    see different results.
+                </p>
+                {% endif %} {% for value in result %}
+                <div class="single-result-card">
+                    <img src="{{ value[1] }}" alt="Image" />
+                    <div class="prompt-text-wrapper">
+                        <p class="prompt-text-p">{{ value[0] }}</p>
+                    </div>
+                    <form action="/search" method="POST">
+                        <input
+                            type="hidden"
+                            name="query"
+                            value="{{ value[0] }}"
+                        />
+                        <!-- <input type="hidden" name="query" value="{{ value[2] }}" /> -->
+                        <!-- <input type="hidden" name="title" value="{{ value[0] }}" /> -->
+                        <input type="submit" value="Find Similar" />
+                        <div class="pick-this">
+                            <span>Copy</span>
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                height="16"
+                                width="14"
+                                viewBox="0 0 448 512"
+                                class="icon-copy"
+                            >
+                                <path
+                                    d="M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z"
+                                    fill="white"
+                                />
+                            </svg>
+                        </div>
+                    </form>
+                </div>
+                {% endfor %}
+            </div>
+        </main>
+        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
+        <script src="static/js/script.js"></script>
+    </body>
+</html>