feat: Dynamically change the background image on the search homepage every day #2247 (#2338)

### What problem does this PR solve?

feat: Dynamically change the background image on the search homepage
every day #2247

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

docker/nginx/ragflow.conf

@@ -15,6 +15,10 @@ server {
         include proxy.conf;
     }
 
+    location /HPImageArchive {
+        proxy_pass https://cn.bing.com;
+    }
+
     location / {
         index index.html;
         try_files $uri $uri/ /index.html;

web/.umirc.ts

@@ -30,7 +30,14 @@ export default defineConfig({
   copy: ['src/conf.json'],
   proxy: {
     '/v1': {
-      target: 'http://localhost:9380/',
+      target: 'http://123.60.95.134:9380/',
+      changeOrigin: true,
+      ws: true,
+      logger: console,
+      // pathRewrite: { '^/v1': '/v1' },
+    },
+    '/HPImageArchive': {
+      target: 'https://cn.bing.com/',
       changeOrigin: true,
       ws: true,
       logger: console,

web/src/pages/search/hooks.ts

@@ -3,7 +3,7 @@ import { useTestChunkRetrieval } from '@/hooks/knowledge-hooks';
 import { useSendMessageWithSse } from '@/hooks/logic-hooks';
 import { IAnswer } from '@/interfaces/database/chat';
 import api from '@/utils/api';
-import { isEmpty, trim } from 'lodash';
+import { get, isEmpty, trim } from 'lodash';
 import { ChangeEventHandler, useCallback, useEffect, useState } from 'react';
 
 export const useSendQuestion = (kbIds: string[]) => {
@@ -99,3 +99,28 @@ export const useSendQuestion = (kbIds: string[]) => {
     isFirstRender,
   };
 };
+
+export const useFetchBackgroundImage = () => {
+  const [imgUrl, setImgUrl] = useState<string>('');
+
+  const fetchImage = useCallback(async () => {
+    try {
+      const res = await fetch(
+        '/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=zh-CN',
+      );
+      const ret = await res.json();
+      const url = get(ret, 'images.0.url');
+      if (url) {
+        setImgUrl(url);
+      }
+    } catch (error) {
+      console.log('🚀 ~ fetchImage ~ error:', error);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchImage();
+  }, [fetchImage]);
+
+  return `https://cn.bing.com${imgUrl}`;
+};

web/src/pages/search/index.less

@@ -51,7 +51,6 @@
 
 .firstRenderContent {
   height: 100%;
-  background-image: url(https://www.bing.com/th?id=OHR.IguazuRainbow_ZH-CN6524347982_1920x1080.webp&qlt=50);
   background-position: center;
   background-size: cover;
 }
@@ -122,7 +121,7 @@
   font-weight: 600;
   line-height: 20px;
 
-  background: linear-gradient(to right, #095fab 10%, #25abe8 50%, #57d75b 60%);
+  background: linear-gradient(to right, #095fab 10%, #25abe8 50%, #55c8dd 60%);
   background-size: auto auto;
   background-clip: border-box;
   background-size: 200% auto;

web/src/pages/search/index.tsx

@@ -16,13 +16,12 @@ import {
 } from 'antd';
 import { useState } from 'react';
 import MarkdownContent from '../chat/markdown-content';
-import { useSendQuestion } from './hooks';
+import { useFetchBackgroundImage, useSendQuestion } from './hooks';
 import SearchSidebar from './sidebar';
 
 import PdfDrawer from '@/components/pdf-drawer';
 import { useClickDrawer } from '@/components/pdf-drawer/hooks';
 import RetrievalDocuments from '@/components/retrieval-documents';
-import { useFetchAppConf } from '@/hooks/logic-hooks';
 import { useTranslation } from 'react-i18next';
 import styles from './index.less';
 
@@ -33,7 +32,7 @@ const SearchPage = () => {
   const { t } = useTranslation();
   const [checkedList, setCheckedList] = useState<string[]>([]);
   const list = useSelectTestingResult();
-  const appConf = useFetchAppConf();
+  // const appConf = useFetchAppConf();
   const {
     sendQuestion,
     handleClickRelatedQuestion,
@@ -50,6 +49,7 @@ const SearchPage = () => {
   } = useSendQuestion(checkedList);
   const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
     useClickDrawer();
+  const imgUrl = useFetchBackgroundImage();
 
   const InputSearch = (
     <Search
@@ -80,12 +80,13 @@ const SearchPage = () => {
                 justify="center"
                 align="center"
                 className={styles.firstRenderContent}
+                style={{ backgroundImage: `url(${imgUrl})` }}
               >
                 <Flex vertical align="center" gap={'large'}>
-                  <Space size={30}>
+                  {/* <Space size={30}>
                     <img src="/logo.svg" alt="" className={styles.appIcon} />
                     <span className={styles.appName}>{appConf.appName}</span>
-                  </Space>
+                  </Space> */}
                   {InputSearch}
                 </Flex>
               </Flex>