Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: enhance mobile responsiveness of Hero Page final #752

Merged
merged 9 commits into from
Oct 31, 2023
Merged

Feat: enhance mobile responsiveness of Hero Page final #752

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d81838d
docs: close parentheses EMBEDDINGS_KEY comment settings
guspan-tanadi Oct 31, 2023
ce8ed5b
style: formatting /api/task_status API-docs
guspan-tanadi Oct 31, 2023
cb12b19
Merge branch 'arc53:main' into settingsAPI-docs
guspan-tanadi Oct 31, 2023
9c5e3d0
docs: insert Method description /api/docs_check section API-docs
guspan-tanadi Oct 31, 2023
5e0dd5c
feat: mobile responsive hero page
varundhand Oct 31, 2023
b4a940a
Merge pull request #750 from guspan-tanadi/settingsAPI-docs
dartpain Oct 31, 2023
7ba939b
feat: mobile responsive hero page
varundhand Oct 31, 2023
6940a75
erge branch 'feature/mobile-resp' of https://github.com/varundhand/Do…
varundhand Oct 31, 2023
353e24f
fix: container layout for firefox
varundhand Oct 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion application/core/settings.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ class Settings(BaseSettings):
API_URL: str = "http://localhost:7091" # backend url for celery worker

API_KEY: str = None # LLM api key
EMBEDDINGS_KEY: str = None # api key for embeddings (if using openai, just copy API_KEY
EMBEDDINGS_KEY: str = None # api key for embeddings (if using openai, just copy API_KEY)
OPENAI_API_BASE: str = None # azure openai api base url
OPENAI_API_VERSION: str = None # azure openai api version
AZURE_DEPLOYMENT_NAME: str = None # azure deployment name for answering
Expand Down
7 changes: 6 additions & 1 deletion docs/pages/Developing/API-docs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,8 @@ This endpoint will make sure documentation is loaded on the server (just run it

**Request:**

**Method**: `POST`

**Headers**: Content-Type should be set to `application/json; charset=utf-8`

**Request Body**: JSON object with the field:
Expand Down Expand Up @@ -116,6 +118,7 @@ This endpoint is used to upload a file that needs to be trained, response is JSO
**Request:**

**Method**: `POST`

**Request Body**: A multipart/form-data form with file upload and additional fields, including `user` and `name`.

HTML example:
Expand Down Expand Up @@ -143,7 +146,9 @@ JSON response with a status and a task ID that can be used to check the task's p
This endpoint is used to get the status of a task (`task_id`) from `/api/upload`

**Request:**
**Method**: `GE`T

**Method**: `GET`

**Query Parameter**: `task_id` (task ID to check)

**Sample JavaScript Fetch Request:**
Expand Down
178 changes: 139 additions & 39 deletions frontend/src/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,163 @@
import { useMediaQuery } from './hooks';
import DocsGPT3 from './assets/cute_docsgpt3.svg';

export default function Hero({ className = '' }: { className?: string }) {
// const isMobile = window.innerWidth <= 768;
const { isMobile } = useMediaQuery();
return (
<div className={`mt-14 mb-12 flex flex-col `}>
<div className="mb-10 flex items-center justify-center ">
<div className={`mt-14 ${isMobile ? 'mb-2' : 'mb-12'}flex flex-col `}>
<div className=" mb-2 flex items-center justify-center sm:mb-10">
<p className="mr-2 text-4xl font-semibold">DocsGPT</p>
<img className="mb-2 h-14" src={DocsGPT3} alt="DocsGPT" />
</div>
<p className="mb-3 text-center leading-6 text-black-1000">
Welcome to DocsGPT, your technical documentation assistant!
</p>
<p className="mb-3 text-center leading-6 text-black-1000">
Enter a query related to the information in the documentation you
selected to receive
<br /> and we will provide you with the most relevant answers.
</p>
<p className="mb-3 text-center leading-6 text-black-1000">
Start by entering your query in the input field below and we will do the
rest!
</p>
<div className="sections mt-8 flex flex-col items-center justify-center gap-1 sm:gap-0 lg:flex-row">
<div className="relative mb-4 h-60 rounded-[25px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 sm:mr-0 lg:rounded-r-none">
<div className="h-full rounded-[21px] bg-white p-6 lg:rounded-r-none">
<img
src="/message-text.svg"
alt="lock"
className="h-[24px] w-[24px]"
/>
<h2 className="mt-2 mb-3 text-lg font-bold">Chat with Your Data</h2>
<p className="w-[250px] text-xs text-gray-500">
{isMobile ? (
<p className="mb-3 text-center leading-6 text-black-1000">
Welcome to <span className="font-bold ">DocsGPT</span>, your technical
documentation assistant! Start by entering your query in the input
field below, and we&apos;ll provide you with the most relevant
answers.
</p>
) : (
<>
<p className="mb-3 text-center leading-6 text-black-1000">
Welcome to DocsGPT, your technical documentation assistant!
</p>
<p className="mb-3 text-center leading-6 text-black-1000">
Enter a query related to the information in the documentation you
selected to receive
<br /> and we will provide you with the most relevant answers.
</p>
<p className="mb-3 text-center leading-6 text-black-1000">
Start by entering your query in the input field below and we will do
the rest!
</p>
</>
)}
<div
className={`sections ${
isMobile ? '' : 'mt-1'
} flex flex-wrap items-center justify-center gap-2 sm:gap-1 md:gap-0`}
>
{/* first */}
<div className=" rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-tr-none md:rounded-br-none">
<div
className={`h-full rounded-[45px] bg-white p-${
isMobile ? '3.5' : '6 py-8'
} md:rounded-tr-none md:rounded-br-none`}
>
{/* Add Mobile check here */}
{isMobile ? (
<div className="flex justify-center">
<img
src="/message-text.svg"
alt="lock"
className="h-[24px] w-[24px] "
/>
<h2 className="mb-0 pl-1 text-lg font-bold">
Chat with Your Data
</h2>
</div>
) : (
<>
<img
src="/message-text.svg"
alt="lock"
className="h-[24px] w-[24px]"
/>
<h2 className="mt-2 mb-3 text-lg font-bold">
Chat with Your Data
</h2>
</>
)}
<p
className={
isMobile
? `w-[250px] text-center text-xs text-gray-500`
: `w-[250px] text-xs text-gray-500`
}
>
DocsGPT will use your data to answer questions. Whether its
documentation, source code, or Microsoft files, DocsGPT allows you
to have interactive conversations and find answers based on the
provided data.
</p>
</div>
</div>

<div className="relative mb-4 h-60 rounded-[25px] bg-gradient-to-r from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 sm:mr-0 lg:rounded-none lg:px-0">
<div className="h-full rounded-[21px] bg-white p-6 lg:rounded-none">
<img src="/lock.svg" alt="lock" className="h-[24px] w-[24px]" />
<h2 className="mt-2 mb-3 text-lg font-bold">Secure Data Storage</h2>
<p className=" w-[250px] text-xs text-gray-500">
{/* second */}
<div className=" rounded-[50px] bg-gradient-to-r from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-none md:py-1 md:px-0">
<div
className={`rounded-[45px] bg-white p-${
isMobile ? '3.5' : '6 py-6'
} md:rounded-none`}
>
{/* Add Mobile check here */}
{isMobile ? (
<div className="flex justify-center">
<img src="/lock.svg" alt="lock" className="h-[24px] w-[24px]" />
<h2 className="mb-0 pl-1 text-lg font-bold">
Secure Data Storage
</h2>
</div>
) : (
<>
<img src="/lock.svg" alt="lock" className="h-[24px] w-[24px]" />
<h2 className="mt-2 mb-3 text-lg font-bold">
Secure Data Storage
</h2>
</>
)}
<p
className={
isMobile
? `w-[250px] text-center text-xs text-gray-500`
: `w-[250px] text-xs text-gray-500`
}
>
The security of your data is our top priority. DocsGPT ensures the
utmost protection for your sensitive information. With secure data
storage and privacy measures in place, you can trust that your
data is kept safe and confidential.
</p>
</div>
</div>
<div className="relative mb-4 h-60 rounded-[25px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 lg:rounded-l-none">
<div className="h-full rounded-[21px] bg-white p-6 lg:rounded-l-none">
<img
src="/message-programming.svg"
alt="lock"
className="h-[24px] w-[24px]"
/>
<h2 className="mt-2 mb-3 text-lg font-bold">Open Source Code</h2>
<p className=" w-[250px] text-xs text-gray-500">
{/* third */}
<div className=" rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/80 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-tl-none md:rounded-bl-none ">
<div
className={`firefox rounded-[45px] bg-white p-${
isMobile ? '3.5' : '6 px-6 '
} lg:rounded-tl-none lg:rounded-bl-none`}
>
{/* Add Mobile check here */}
{isMobile ? (
<div className="flex justify-center">
<img
src="/message-programming.svg"
alt="lock"
className="h-[24px] w-[24px]"
/>
<h2 className="mb-0 pl-1 text-lg font-bold">
Open Source Code
</h2>
</div>
) : (
<>
<img
src="/message-programming.svg"
alt="lock"
className="h-[24px] w-[24px]"
/>
<h2 className="mt-2 mb-3 text-lg font-bold">
Open Source Code
</h2>
</>
)}
<p
className={
isMobile
? `w-[250px] text-center text-xs text-gray-500`
: `w-[250px] text-xs text-gray-500`
}
>
DocsGPT is built on open source principles, promoting transparency
and collaboration. The source code is freely available, enabling
developers to contribute, enhance, and customize the app to meet
Expand Down
14 changes: 14 additions & 0 deletions frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -364,3 +364,17 @@ template {
color: #9ca3af;
opacity: 1;
}

/* third container laylout for Firefox */
@-moz-document url-prefix() {
.firefox{
padding: 32px;
}
}

/* For screens with a maximum width of 768px (mobile) */
@media (max-width: 768px) {
.firefox {
padding: 16px;
}
}
Loading