deepset-ai / haystack-home Goto Github PK

@bilgeyucel idk what you think but @carlosgauci pointed this out the other day:
Apart from the individual tutorials, all the headers are dark, and I think it looks better that way too.
Wdyt? Shall we change it so that individual tutorials also have dark headers by default?

Seems we by default make the integration type name plural in the filter. Which can sound odd with new integration types such as 'Monitorings'
Could we make this just the name of the type? Keep it to the same as the tag appears on the cards?

Hey @carlosgauci
I'm not sure what would look best but is it possible to have an optional 'logo' in the frontmatter of an integration which if exists is displayed on the integration card here:

And somewhere on the page you click onto:

I'd imagine we would keep the actual images in the static/images/logos folder.

Meta descriptions etc work fine on social sites like twitter but fail e.g. here: https://www.heymeta.com/url/haystack.deepset.ai/blog/what-is-an-llm

I think it's because the title, descriptions, images etc are added to opengraph elements but not meta?

These are small ones, but it would be nice to fix them:

1. Right now, when I sort by anything apart from level, go into the tutorial detail and come back to tutorials page with browsers back button, sorting goes back to level but the sorting dropdown stays in the previous option, either as newset or last updated. Solution would be reset all filters
2. Featured content should always stay as the first tutorial independent from sorting. It can disappear with filtering but the featured content should not change its order after sorting.

Disclaimer: This issue will evolve as we have a better understanding of the design we want to go for

Let's introduce a blog for haystack website. Some requirements we already know we need:

• A preview image on the overview page
• Canonical url functionality as the original post might be published on deepset.ai
• Author pages
• The ability to add social media for authors in the article
• A featured post at the top (the newest gets displayed bigger similar to the deepset.ai/blog ?)
• Some guidance on how to maintain images per article and a good structure in the repo for them :)

It would be nice to have a good 404 page I think :)
We could list:

• A 'back to the mainpage' to the lading page
• Docs: docs.haystack.deepset.ai
• The blog: deepset.ai/blog

Wdyt @aantti ?

Hey @carlosgauci - we are ready to introduce the 'sorting' into the tutorials page.
We now have the following frontmatters being added to the tutorials:
e.g.:

created_at: 2023-11-01
last_updated: 2023-02-15

Could we have a sort by that the user can select to see the 'latest-oldest' tutorials (E.g. Sort by 'date created')
and also one to sort by latest updated - oldest updated (E.g. Sort by 'date updated)
And we could use these frontmatters above to do that. Wdyt?

We'll remove some components from Haystack. Tutorials with these components should have a tag to indicate this deprecation.

Hey @carlosgauci as discussed via email, we have another project that we are working on which we would need to develop a temporary page for on haystack.deepset.ai
We would like a page under haystack.deepset.ai/advent-of-haystack which will showcase a page that will host a coding challenge for 10-13 days in December.
Each challenge will be added day by day.
You will receive a cancva invite with the design and relevant assets for that page.

The challenges will be hosted as .md files on advent-of-haystack (I've added you as a maintainer).
File structure in this repo:
day_1.md
day_2.md
and so on.

We would like to set up a page where every new day of the challenge, me or @bilgeyucel can go in and add one of the .md files to the page. which reveals the challenge and links to a page that contains the details and submission links of that challenge.

Canva should allow you to download that assets in any format you need, but if you need help please reach out to me and I will get you the resources asap. The Canva also has comments on parts where there might be some questions on your side.

The challenge should start on December 3rd, so we have just over a month to prepare, which should hopefully be enough time for all of us. I will submit some dummy challenge .md files to that repo if you need me to. You also have maintainer rights.

PS: We would remove(hide) the page once the challenge is complete, but we may re-use it next year too!

Here's a preview, but you will get an invite with proper access:

On (old) Haystack website we have a Benchmarks page: https://haystack.deepset.ai/benchmarks/latest
You can select between versions of Haystack and look at their benchmarks but it wasn't regularly updated.

@carlosgauci we now have updated benchmarks that are all here: https://github.com/deepset-ai/haystack/tree/main/docs/_src/benchmarks

Do you think it would be possible as a first iteration:

1. Pull over these benchmarks to haystack-home and create pretty much the same as the previous benchmarks page for 'latest'

As a later iteration (later) we would:

1. Add versions back
2. Automate it so that we push new benchmarks from haystack to haystack-home

To give you an idea of how this benchmarks page was created in the previous website here it is: https://github.com/deepset-ai/haystack-website/blob/source/pages/benchmarks/%5B...slug%5D.tsx

@carlosgauci we can follow the progress of the tutorial overview page revamp here. Here is the sequence with which we can introduce the changes presented in this figma design

• First up let's start with the level filter and 'new' tag functionality
• Next up the time to complete and task filters can be added. @bilgeyucel and I will have to implement this in haystack-tutorials
• Next up the search with dC

#89 is not working, no last update date is visible. This is probably tutorials are not kept in the repository (so last commit date is not fetched).

Date info in available if I add md files manually and build the website: example tutorial

These two images should be reduced in size to speed up load time:

https://haystack.deepset.ai/blog/writing-professional-python-logs/thumbnail.png
https://haystack.deepset.ai/images/authors/kacper-lukawski.jpg

Some of the integrations will be for Haystack 2.0 >=
So we would like to start tagging those.
Maybe a frontmatter parameter called version or haystack_version where we can say "Haystack 2.x"?
Would be nice if this can be displayed on the integrations card with a slightly different color to the 'type' tag 🙏

We would like to provide the option to hide a page, such as a tutorial, an article, the hacktoberfest page etc.
The idea is that they would be still reachable if you go directly to the link, but they would be removed from overview pages.
A frontmatter element to set this might be the idea. @carlosgauci would this be easy to implement? Or is it already doable?

Want to Contribute? section stays at the bottom of the page which makes them harder to be found.

Let's keep this section where it is but put the "Contribute" button on the header too (next to the title and description) for these pages:
https://haystack.deepset.ai/integrations
https://haystack.deepset.ai/tutorials

Once we're on a page, the UI doesn't make it clear which one we are in. Might make navigating and placing yourself easier if we had a color change depending on which tab the user is currently on. Maybe the same color as the drop down 'active' tabs?
--color-yellow?

• The logos in the hero section should be in the same level. Right now the one on the left is horizontally centered but the one on the right is not. I think they both should be aligned the level, towards to the top of the page, like this in the image 👇
  

• The banner shouldn't be visible in the Hacktoberfest page as it already directs to this page

The mp4 file that is on https://haystack.deepset.ai/overview/demo does not play on Chromium
I'm not sure playing mp4 on out of the box chromium is going to be possible. But, @carlosgauci would it be possible to display a still image if user is seeing the page on Chromium?

Hey @carlosgauci, we need a search feature on the tutorials page as you discussed on discord. There's already a design for it: Figma design.

UX:

• When the user clicks the search bar, the modal will open and the cursor's focus will be on the search input. When user types the search word and presses enter or search button, query will send to the endpoint and results will be shown on the modal.
• There will be 5 search result items in the list.
• A spinner would be nice to show in the pending state.
• ESC key, X button on top right or clicking outside of the modal should close the modal.
• Now in the design, the result items displays the title of a tutorial and its description but instead of description, we'll display the search content of 100 - 120 words (it may be less or more, we can update that).

We'll provide an endpoint to send the query and get a response. Just as a piece of background information: the system will be on deepsetCloud -> Documentation for the endpoint @masci will help us setting up the API key on Vercel.

Not to block the implementation of the frontend, I'll share an example response from the endpoint with you. The necessary fields for you will be content and file_name of documents. The level and completion time of each tutorial (already in the design) will be provided later as meta info of each document in this response.

Example response:

{
   "query_id":"XXX",
   "results":[
      {
         "query_id":"XXX",
         "query":"prompt node",
         "answers":[
         ],
         "documents":[{
               "id":"XXX",
               "content":"You can use it to perform practically any NLP task if you define your own prompt templates for them. By creating your prompt templates, you can extend the model's capabilities and use it for a broader range of NLP tasks in Haystack.\nYou can define custom templates for each NLP task and register them with PromptNode. Let's create a custom template to generate descriptive titles for news:\n\nInitialize a   instance. Give your template a   and define the prompt in  . To define any parameters for the prompt, add them to the   wrapped with curly brackets. ",
               "content_type":"text",
               "meta":{
                  "_split_id":9,
                  "file_name":"21_Customizing_PromptNode.txt",
                  "headlines":[
                     {
                        "level":1,
                        "headline":"Generating Titles for News Articles with a Custom Template"
                     }
                  ],
                  "_file_created_at":"2023-04-12T13:24:50.576243+00:00",
                  "_file_size":14152,
                  "highlighted":{
                     "content":[
                        "You can use it to perform practically any NLP task if you define your own <em>prompt</em> templates for them.",
                        "By creating your <em>prompt</em> templates, you can extend the model's capabilities and use it for a broader range",
                        "Give your template a   and define the <em>prompt</em> in  .",
                        "To define any parameters for the <em>prompt</em>, add them to the   wrapped with curly brackets."
                     ]
                  }
               },
               "score":0.642711100022835,
               "embedding":null,
               "file":{
                  "id":"XXX",
                  "name":"21_Customizing_PromptNode.txt"
               },
               "result_id":"XXX"
            },
         ]
      }
   ]
}

Let me know if you have any questions :)

Hey @carlosgauci - we would like to have a minor update to the integrations page. Could we tag the ones that the author name is 'deepset' with a tag that says 'maintained by deepset'?

1. Would it be possible to add these tags to the cards and into the pages themselves?
2. Can we then also add a filter to the page where we show all of them by default but allow to filter to 'maintained by deepset'? - I'm not entirely sure what kind of filter would make sense for this? Any suggestions?

Eventually we may add some more tags but let's start with these.
I've made some tags and draft image of what we would like to get to here.

Hey @carlosgauci - we forgot to add the same disclaimer under the newsletter sign up in the landing page:
By submitting my email, I agree to allow deepset to store and process my personal data.

In the integrations page, we can filter by document stores and nodes etc but we cant share the filtered list with other people. We need URL to be keeping the state so that people can directly reach to this view by clicking the link👇

This state should be kept in the URL for both dropdown filters

In the Integrations page. At least on iOS there seems to be an issue with the fonts of the code snippets:

Some images are too big to have width=100%. See image below. Can we have medium and small options where medium refers to width=70%, small refers to width=50%. However, on small screens, every image should have width=100% again.
We can refer to this CSS class through md image syntax: ![text](image_path#medium)

Currently, we manually remove events from the community page. It would be nice if they disappeared from the UI when their date passed. Is it possible to do this?

On smaller screens we're getting this layour issue where the image is overlayed with the text. Would be nice to have a fix 🙏

Hey @carlosgauci
Haystack will be participating in Hacktoberfest this year. Meaning on October 1st we would tag some issues with 'hacktoberfest' on the haystack and haystack-tutorials repo.

The idea is, for that month, we have a page displaying these issues, how they are tagged, and whether they are closed or not.

We would also change the 'get started' button temporarily to 'Hacktoberfest' that takes you to that page. The page could be '/hacktoberfest-2023'

To help with developing this, I've created a repo with mock issues tagged with 'h'. When the time comes, I would change the repo that we pull from, and make the tag we look for 'hacktoberfest'

This requires working with the GitHub API, and fetching the issues tagged with 'h' (eventually hacktoberfest) from the haystack and haystack-tutorials repos.

Is this something you could work on? And if yes, what would you need from us? Anything on vercel or GitHub?

I've also created a mockup for you to review and approve @bilgeyucel

Hey @carlosgauci
Could we add some anchors to sections of pages? E.g. in the community page, when we have an event it would be nice to share the section to the event to people

Let's implement a way to exclude some pages from the sitemap generation if needed. E.g. there's no need to have the versioned benchmarks in the sitemp, only haystack.deepset.ai/benchmarks
I found a way you can have an optional "private" or "sitemap_exclude" parameter in the frontmatter (I think) which will exclude it from being added to the sitemap. I think this is what this forum post explains: https://discourse.gohugo.io/t/disable-page-from-sitemap/37213/2

Do I understand this correctly @carlosgauci?

Tutorials have the following in the frontmatter:

---
layout: tutorial
colab: https://colab.research.google.com/github/deepset-ai/haystack-tutorials/blob/main/tutorials/01_Basic_QA_Pipeline.ipynb
toc: True
title: "Build Your First QA System"
last_updated: 2022-10-12
level: "beginner"
weight: 10
description: Get Started by creating a Retriever Reader pipeline.
category: "QA"
aliases: ['/tutorials/first-qa-system']
---

We would like to also have a 'download' button at the top too.

@masci - is it worth asking contributors to provide a download field in haystack-tutorials index.toml ? - I would imagine everything should be 'downloadable'? In which case we could just re-use the colab field URL to download the file?

I really like sidenotes, but can we please make them more distinguishable? Maybe change the colour to Orange instead of Blue?

• Remove new tag from 'Resources' in the header
• Add 2.0-beta tag for 'Documentation' and 'Tutorials' in the header
• Add a yellow banner right under the hero section of the tutorial overview page
• Add a dropdown for "Haystack version"
  • By default, only 1.x tutorials should be visible.
  • There shouldn't be any 2.0 beta tutorials on the main overview page
• Search bar will be doing keyword filtering (not connected to the API just now)
  

Not an urgent issue but a nice one to have. Simply: make the design/look/feel of the maintained by deepest tag on the integrations page nicer :)

Hey @carlosgauci
Could we add the google tag manager to the website head and body?
The tag itself is under NEXT_PUBLIC_GOOGLE_TAG_ANALYTICS in vercel for the old haystack website.
And this is how they were added in the old website: https://github.com/deepset-ai/haystack-website/blob/source/pages/_document.tsx

In a tutorial, I want to create a code block without any code highlight and without a copy button such as:

/doc-search
└── docker-compose.yml

However, not providing a programming language breaks the script that adds the COPY buttons to code blocks. That's why we don't see COPY buttons on code blocks after the one I shared above.
A try-catch block like below in code-copy-buttons.js solves this problem but probably there is a better approach.

    try {
      codeBlock.parentNode.insertBefore(button, codeBlock.parentNode.nextSibling);
    } 
    catch(e){
      console.log(e)
    }

We need a new tag to be displayed on tutorial cards: Outdated

• The tag will be displayed before other tags and will have the "Outdated" text
• colors are --color-dark-blue and --color-white
• There will be haystack_version attribute in the frontmatter of each tutorial. The value is either a pinned Haystack version such as "1.17" etc or "latest". This tag will be displayed when the value is not "latest".
  • haystack_version: "1.16" -> The Outdated tag will be displayed
  • haystack_version: "latest" -> no Outdated tag
• We might use this attribute to filter tutorials at some point, jfyi

Replace special characters like () from h3 titles

I tried but failed to make the optional logos here bigger without also making the 'Document Store'/'Custom Node' tags also bigger with it. Could we make these slightly more clear and big in the integrations card? Also any chance we can make all the integration card sizes uniform? Each row has the same size but across rows they can be different:

In some tutorials, we'd like to create numbered list and align code pieces with list items. However, when code pieces are indented, they look bigger.

• We should be able to provide markdown content (at least links and bold or italic text) as caption
  Like Medium has:

When sharing the webpage on twitter, the meta image does not show up. This probably requires a fix in the config file

Hi @carlosgauci
Lately we've been working on what we would like tags and filters for the Blog section to look like and we've done some design work with a colleague. Below is all the info and the steps we see as doable:

Figma design: https://www.figma.com/file/4oQWKGNLySVYC3lbXnI659/Blog?type=design&node-id=1-132&mode=design&t=nPvu8hoFoRRjmgH4-0

1. In the design, you'll notice a search bar, but we can skip this for now until @bilgeyucel can implement the search backend like we did for tutorials
2. We would provide a list of tags in the frontmatter of each article
3. In the current design, in the 'landing page' section, you'll see 'Topics' as a drop-down. BUT, we would also like to see how this would look if instead of a hidden dropdown, it was all listed on the right or left hand side of the landing page. We unfortunately don't have a design for this, do you think you could nonetheless come up with an implementation?

Describe the bug
I have identified that the Twitter logo displayed in the footer section of website is outdated, and it is crucial to keep branding up to date with the latest elements provided by Twitter.

Expected behavior
New Twitter logo will be used to replace the outdated one in the footer section of our website.

To Reproduce

1. Go to Homepage
2. Scroll down the bottom

FAQ Check

• Have you had a look at our new FAQ page?

System:

• OS: Windows
• GPU/CPU:
• Haystack version (commit or version number):
• DocumentStore:
• Reader:
• Retriever:

This is probably niche and won't be needed much. But we now have a scenario where we would like to display a small 'note' in a tutorial. the current CSS doesn't seem to display these any differently. E.g. This is what I have in the genrated tutorial markdown:

We've modified this first tutorial to make it simpler to start with. If you're looking for a Question Answering tutorial that uses a DocumentStore such as Elasticsearch, go to our new Build a Scalable Question Answering System tutorial

But the display is a normal paragraph.

Is it possible to make it so that this gets displayed as a small quote/note maybe? Anything to make it clear that it's not a normal paragraph :)

Not sure if this is a bug or something wrong we're doing. E.g. this integration page contains an image from the /image directory. But we can't see it appear on the website: https://github.com/deepset-ai/haystack-integrations/blob/main/integrations/chainlit.md