Free canvas generation method and system based on artificial intelligence

Abstract

The invention discloses a free canvas generation method and system based on artificial intelligence, and relates to the technical field of artificial intelligence, the method comprises the following steps: a server receives a theme keyword input by a user, and calls an artificial intelligence model to generate a document outline of a current document for the theme keyword; the server establishes a streaming transmission channel with the client, and pushes chapter data of the document outline to the client in real time based on the streaming transmission channel; the client caches the chapter data through a chapter data buffering queue, extracts the chapter data from the chapter data buffering queue according to a preset time interval and inserts the chapter data into document data; the server renders the document data into a visual node; and the server adjusts the visual node based on the equipment type and the preset proportion. The method is helpful for solving the problem that the free canvas cannot be intelligently and efficiently generated in the prior art.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of artificial intelligence, in particular to a free canvas generation method and system based on artificial intelligence. BACKGROUND

[0002] Under the digital office scene, the intelligent demand of document editing and visualization tools continues to rise, but the existing technology has multiple bottlenecks: first, the content generation efficiency is low, the traditional tool relies on user manual creation of layout, lacks AI assistance, and is time-consuming and laborious; second, the batch loading mode is still used in the AI generation scene, the structured document streaming and rendering scheme is not mature, and the user waiting time is long; third, the rendering performance is insufficient, and loading a large amount of content at a time can easily cause page white screen lag, and the experience is poor; fourth, the node expandability is limited, the node system of mainstream rich text editors is closed, and custom card layout and dynamic attribute management need a lot of customized development; fifth, the layout adaptation ability is poor, there is a lack of unified multi-proportion switching system, and it is difficult to take into account the display effect of different devices; sixth, the theme customization is complex, the theme and content are strongly coupled, and replacement needs to adjust the elements repeatedly.

[0003] These problems seriously restrict the practicability of the tool and cannot meet the needs of intelligent generation of free canvas, efficient transmission and rendering of free canvas, etc., therefore, there is an urgent need for a method capable of intelligently generating free canvas. SUMMARY

[0004] Therefore, the present application provides a free canvas generation method and system based on artificial intelligence, which can intelligently and efficiently generate free canvas.

[0005] To achieve the above purpose, the present application provides the following technical solutions: A free canvas generation method based on artificial intelligence, comprising: The server receives the theme keyword input by the user, calls an artificial intelligence model to generate a document outline of the current document for the theme keyword; The server establishes a streaming transmission channel with the client, and pushes chapter data of the document outline to the client in real time based on the streaming transmission channel; the client caches the chapter data through a chapter data buffer queue, and extracts chapter data from the chapter data buffer queue at a preset time interval and inserts it into document data; The server renders the document data into a visualization node; The server adjusts the visualization node based on the device type and the preset proportion.

[0006] On the basis of the above technical solution, the present application can also be improved as follows: Optionally, the method further comprises: When the client listens to the theme change event, the visual style of the visualization node is refreshed based on the changed theme.

[0007] Optionally, the method further comprises: When the free canvas editor content changes, the theme of the current document changes, or the visualization node card type changes, the client saves the request through the anti-shake saving queue buffer, and combines multiple saving requests generated in a short time in the anti-shake saving queue; Trigger the anti-shake saving mode when the editor content changes; Trigger the immediate saving mode when the theme changes or the card type changes.

[0008] Optionally, the method further comprises: Obtain the content of the first card carrying the first-level chapter of the document outline in the free canvas editor, and convert the content of the first card into a string content; Compare the string content with the historical content string, and trigger the screenshot operation when there is a string content change or a screenshot trigger flag; Obtain the picture uniform resource locator corresponding to the screenshot, and update the cache to avoid repeated screenshots; Only when there is a picture uniform resource locator, regenerate the cover screenshot.

[0009] Optionally, after the step of caching the chapter data by the client through the chapter data buffer queue, comprising: If the queue processing state flag of the chapter data buffer queue is in an unprocessed state, start the cycle of extracting chapter data from the chapter data buffer queue and inserting the chapter data into the document data; Extract a chapter data from the head of the chapter data buffer queue through the chapter data buffer queue processing function, and call the data insertion function to insert the chapter data into the document data; Call the editor content update interface to update the editor display content, and call the style application function to apply the preset card style to the visualization node; Set a timing task, and recursively call the chapter data buffer queue processing function after the time corresponding to the chapter display interval parameter, until the chapter data buffer queue is empty.

[0010] Optionally, the rendering of the document data into a visualization node comprises: Map the card node corresponding to the document data to a view component, the view component comprising a drag handle, a style configuration handle, a card main body, and a style menu floating layer; Realize the visualization presentation and interaction logic of the card node through the view component; A bidirectional mapping relationship between the attributes of the card node and the data attributes of the document object model element is established; The document object model element data attributes are deserialized into the card node attributes and the card node attributes are serialized into the document object model element data attributes through the hyper text markup language parsing function and the hyper text markup language rendering function, so as to ensure that the data layer and the view layer are consistent in state.

[0011] Optionally, the size parameter of the visualization node is dynamically adjusted based on the device type and a preset ratio, including: The page type identifier is checked, if it is a presentation mode, the corresponding size preset rule is matched according to the card type identifier, the traditional ratio parameter or the default ratio is loaded, and the card basic size is configured through the size management unit; The document tree is traversed to filter the card type node, and a new attribute object is constructed, the new attribute object including the original attributes of the node, the updated card type identifier and the forced update identifier; If it is detected that the running environment is a mobile terminal, the adaptive font size is calculated according to the ratio of the screen visual width to the reference width, and is assigned to the new attribute object; The legality of the card node content is checked, only the size related attributes of the specified node are updated, the node type is kept unchanged, and the dynamic size adjustment is completed.

[0012] Optionally, the visual style of the visualization node is refreshed based on the changed theme, including: After receiving the theme configuration related data, the title font and the body font are loaded; The card background color is processed according to the parameter format; The custom link color or the theme main tone is selected based on the custom identifier; The border radius pixel value is converted into a relative length unit; The card shadow effect is matched according to the card shadow type parameter; The block element color is set according to the block element style mode parameter; All the style parameters are configured as custom attributes of the cascading style sheets, and are set effective through the document root element style attribute; The theme change custom event is triggered and carries the theme state object, and the global refresh of the visual style of the visualization node is completed.

[0013] An artificial intelligence based free canvas generation system, comprising: An outline generation module is arranged on a server, configured to receive a user input theme keyword, and call an artificial intelligence model to generate a document outline for the theme keyword; The streaming module is arranged on the server and is used for establishing a streaming channel between the server and the client, and pushing chapter data of the document outline to the client in real time based on the streaming channel. The buffering module is arranged on the client and is used for buffering the chapter data through a chapter data buffer queue and inserting chapter data extracted from the chapter data buffer queue into document data at a preset time interval. The node rendering module is arranged on the server and is used for rendering the document data into visual nodes. The adaptive layout module is arranged on the server and is used for dynamically adjusting the visual nodes based on a device type and a preset ratio.

[0014] An electronic device comprises a memory, a processor, and a computer program stored on the memory and running on the processor, and the processor implements the steps of the method when executing the computer program.

[0015] A non-transitory computer-readable storage medium has a computer program stored thereon, and the computer program is executed by a processor to implement the steps of the method.

[0016] The present application has the following advantages: In the present application, the free canvas generation method based on artificial intelligence calls an artificial intelligence model to generate a document outline for a theme keyword, replaces manual content organization, greatly improves the creation efficiency, and saves the time cost; based on the streaming channel and the chapter data buffer queue, the chapter data is pushed and inserted in real time, the long waiting and page lag caused by traditional batch loading are avoided, and the user experience is optimized; the document data is rendered into visual nodes, the size is dynamically adjusted in combination with the device type and the preset ratio, the cross-device adaptation problem is solved; the theme and the content are decoupled and designed, the visual style is refreshed in real time when the theme is changed, the elements do not need to be manually adjusted, and the customization complexity is reduced. BRIEF DESCRIPTION OF DRAWINGS

[0017] For the purpose of illustration but not limitation, the present application will be described in conjunction with the embodiments of the present application and the accompanying drawings, in which: Figure 1 The flowchart of the free canvas generation method based on artificial intelligence in the embodiments of the present application is shown; Figure 2 The first schematic diagram of the main components of the free canvas generation system based on artificial intelligence in the embodiments of the present application is shown; Figure 3 The second schematic diagram of the main components of the free canvas generation system based on artificial intelligence in the embodiments of the present application is shown; Figure 4 The schematic diagram of the physical structure of the electronic device provided by the present application is shown. DETAILED DESCRIPTION

[0018] In order to better understand the technical scheme of the present application, the technical scheme in the embodiments of the present application will be described clearly and completely below in conjunction with the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all the embodiments of the present application. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative work should fall within the scope of protection of the present application.

[0019] It should be noted that the terms "first", "second" and the like in the specification of the present application and the above-described accompanying drawings are used to distinguish similar objects, and do not necessarily indicate a specific order or a chronological sequence. It should be understood that the data thus used can be interchanged under appropriate circumstances, so that the embodiments of the present application described herein can be implemented. In addition, the terms "comprise" and "have" and any variations thereof are intended to cover non-exclusive inclusion, for example, a process, method, system, product or device comprising a series of steps or units does not necessarily have to be limited to those steps or units clearly listed, but can include other steps or units not clearly listed or inherent to these processes, methods, products or devices.

[0020] It should be noted that the features in the embodiments of the present application and the embodiments can be combined with each other without conflict. The embodiments of the present application will be described in detail below in conjunction with the accompanying drawings.

[0021] Figure 1 The flowchart of the method for generating a free canvas based on artificial intelligence in the embodiments of the present application is shown in FIG. 1, which comprises the following steps S101-S106. Figure 1 The method for generating a free canvas based on artificial intelligence provided in the embodiments of the present application comprises the following steps S101-S106.

[0022] S101, the server receives the topic keyword input by the user, and calls an artificial intelligence model to generate a document outline for the topic keyword.

[0023] The topic keyword input by the user is received, and a structured document outline is generated by a large language model (LLM).

[0024] The text risk detection API is called before initiating the generation request, to judge the risk level of the user input content. If the risk level is not equal to "PASS", the generation is prevented and the user is prompted to re-input; The websearch interface is called according to the user option, to obtain a search id. The search id is passed as a parameter to the generation task, and the server obtains the network search result according to the search id and fuses it into the generated content; Support uploading PDF, DOCX, XLSX and other formats of documents, calling extractPDFContent, mammoth.convertToHtml, xlsx.read and other libraries to parse the document content, passing the parsed result as the reference_content parameter to the generation task, and the server generates an outline based on the reference content.

[0025] S102, the server establishes a streaming channel with the client, and pushes the chapter data of the document outline to the client in real time based on the streaming channel.

[0026] The SSE (Server-Sent Events) technology is used to establish a one-way data flow channel between the server and the client, and real-time push the generated content fragments; Step 1: The client initiates a POST request to the outline generation interface, and the request body contains the task ID (task_id), and the request header contains the Authorization token; Step 2: The server establishes an SSE connection, first pushes the event='start' event, and the client receives it and initializes the document data structure docsData, which contains the root node (type='doc') and the document node (type='document'); Step 3: The server loops to push the event='chapter' event, and the data field of each event contains the structured data of a chapter, including chapter type (type='card'), chapter attributes (attrs) and chapter content (content); Step 4: The client reads the data stream through the getReader method of ReadableStream, decodes the data block using TextDecoder, splits the data line by newline, parses the data line starting with "data:", extracts the JSON object and calls the onMessage callback function; Step 5: The onMessage callback function calls the addChapterToQueue method to add chapter data to the end of the chapter queue, and if the chapter queue processor is not started, it starts the processChapterQueue loop; Step 6: The server pushes the data='[DONE]' identifier, the client calls the onComplete callback function, triggers the handleStreamComplete method, and calls the completeStreamProcess method to perform subsequent processing after the chapter queue is emptied.

[0027] The node rendering engine also supports the following custom node types: PList node, used to render a diversified list layout, supporting horizontal and vertical layouts, and supported list styles include: bullets (bullet list), arrow (arrow list), record (record list), annular (annular list), shape (shape list), image (image list), pyramid (pyramid list), funnel (funnel list), semicircle (semicircle list), stairs (ladder list), each list item supports configuration background color, shadow, border; PBlockquote node, used to render a quote block, supports configuring quote style (quoteStyle) including: 1 (left vertical line), 2 (left quotation mark), 3 (complete border), 4 (background fill), supports configuring background color, text color, border color; Columns node, used to render a multi-column layout, supporting 2-column, 3-column, 4-column layout, supporting drag adjustment column width, each column is represented by a Column node, Column node contains width attribute (percentage or pixel value), supports dragging content blocks between columns to rearrange; Image node, used to render an image, supports configuring image width, height, alignment (align), floating method (float), supports cropping function, realizes drag and zoom cropping through CropBox component, supports focus setting (focusPoint), and keeps the focus position in the viewport in responsive layout.

[0028] S103, the client caches chapter data through the chapter data buffer queue, and inserts the chapter data into the document data at a preset time interval from the chapter data buffer queue.

[0029] A FIFO queue is established on the client side to buffer the received chapter data, and the dequeuing process is performed at a fixed time interval (such as 400ms) to avoid performance problems caused by a large number of instantaneous DOM operations.

[0030] Step 1: Define chapter data buffer queue chapterQueue (Array type), queue processing state flag isProcessingQueue (Boolean type), chapter display interval chapterInterval (Number type, default 400ms), timer handle queueProcessorTimer; Step 2: The processChapterQueue function takes a chapter data from the head of the queue, sets isProcessingQueue to false and returns if the queue is empty, otherwise sets isProcessingQueue to true; Step 3: The pushToContent function is called to add chapter data to the docsData.content[0].content array, which iterates through the chapter data and recursively constructs the ProseMirror node structure. Step 4: After a 100ms delay, the getFirstCardContent function is called to get the JSON content of the first card, and the cache is updated if it is different from firstCardContentCache. Step 5: After a 100ms delay, the from and to positions of the current selection in the editor are saved, the editor.content is updated with editor.commands.setContent(false) to not trigger history, forceApplyCardPreset is called to apply card style presets, the selection is restored, and window.scrollTo is called to scroll to the bottom of the page. Step 6: Set a timer to recursively call processChapterQueue to handle the next chapter after chapterInterval milliseconds. Step 7: When the component is unmounted (onUnmounted), the queueProcessorTimer timer is cleared to prevent memory leaks.

[0031] When new chapter data is received, it is added to the tail of the chapter data buffer queue. If the queue processing status flag of the chapter data buffer queue is in the unprocessed state, the chapter data buffer queue processing loop is started. A chapter data is extracted from the head of the chapter data buffer queue by the chapter data buffer queue processing function, and a data insertion function is called to insert the chapter data into the document data. The editor content update interface is called to update the editor display content, and the style application function is called to apply the preset card style to the visualized node. Set a timer to recursively call the chapter data buffer queue processing function after the time corresponding to the chapter display interval parameter, until the chapter data buffer queue is empty.

[0032] S104, the server renders the document data into visualized nodes.

[0033] Custom node extension layer: extend the Card node type based on the ProseMirror framework, which supports configuration attributes including but not limited to: layout, background image (imageUrl), focus coordinates (focusPoint), content alignment (contentAlignment), card style (cardStyle), card color (cardColor), full bleed mode (isFullBleed), etc. Vue component rendering layer: map the Card node to the Vue component CardComponent through VueNodeViewRenderer to realize the visual presentation and interaction logic of the node, which includes the drag handle, style configuration handle, card body, and style menu floating layer. Attribute synchronization mechanism: establish a bidirectional mapping relationship between node attributes (attrs) and DOM element data attributes (data-*), ensuring the consistency of the data layer and the view layer.

[0034] Render document data into visual nodes; Step 1: Define the CardSchema object, configure default, valueType, dataName, numberKind, and other metadata for each attribute; Step 2: valueType supports the following types:'string' (string), 'number' (number), 'boolean' (boolean), 'json' (JSON object), {kind:'enum', values:[...]} (enum type); Step 3: The createAttributes function iterates through CardSchema to generate an AttributeSpec object for each attribute, which includes the default, parseHTML, and renderHTML fields; Step 4: The parseHTML function reads the data-* attributes from the HTML element and performs type conversion according to valueType, including: string is returned directly, number is converted by parseFloat, boolean is checked for equality to 'true', JSON is parsed by JSON.parse, and enum type is checked for value in the values array; Step 5: The renderHTML function converts node attributes into HTML data attributes, returning an empty object if the value equals the default value (not rendering), or {'data-attribute name': serialized value} if the value is not equal to the default value. The serialization process uses JSON.stringify for JSON types and String conversion for other types. Step 6: The content attribute of the Card node is set to "pBlock+", indicating that one or more pBlock child nodes are allowed. The isolating attribute is set to true, indicating that the node is an isolated node. The defining attribute is set to true, indicating that the node is a defining node. The draggable attribute is set to true, indicating that the node is draggable.

[0035] The card node corresponding to the document data is mapped to a view component, which includes a drag handle, a style configuration handle, a card body, and a style menu pop-up. The visualization and interaction logic of the card node are implemented through the view component. A bidirectional mapping relationship is established between the attributes of the card node and the data attributes of the document object model element. The document object model element data attributes are deserialized into card node attributes, and the card node attributes are serialized into document object model element data attributes through the HTML parsing function and the HTML rendering function, ensuring that the data layer and the view layer are consistent.

[0036] S105, the server adjusts the visualization node based on the device type and the preset scale.

[0037] Multiple card size presets are maintained through a multi-scale preset manager, including the default scale (75rem width x 75rem height) and the 16:9 traditional scale (75rem width x 42.1875rem height), and a preset switching interface is provided. The dynamic size calculation unit dynamically adjusts the aspect ratio of all Card nodes based on the cardType parameter (1 = default scale, 2 = 16:9 scale). By traversing the editor document tree (editor.view.state.doc.descendants), the node attribute update operation (tr.setNodeMarkup) is performed for each Card node, and the new cardType and forceUpdate timestamp are written into the node attribute, triggering the Vue component to recalculate the style object. Detect device type and screen width through mobile adaptation unit. When mobile device features (navigator.userAgent matches mobile device identifier) or screen width is less than 768 pixels are met, calculate the scaling ratio ratio=screenWidth / 1200, and dynamically adjust the font-size attribute of the root element to baseFontSize x ratio. Achieve overall equal scaling through rem unit; Support pageType parameter (1=presentation mode, 2=document mode) through page type switching unit. In the presentation mode, each Card node occupies the full viewport height. In the document mode, the Card node height adapts to the content without fixed height limit. Display all card thumbnails in the left navigation bar through scaling preview unit. The thumbnails are scaled down by CSS transform: scale(0.15) to achieve equal scaling. Clicking on the thumbnail scrolls to the corresponding card position. When exporting PDF or PPT, select the corresponding page size according to cardType through export adaptation unit. The default ratio export is A4 or custom size. The 16:9 ratio export is the standard PPT size (1920x1080 pixels).

[0038] Step 1: The forceApplyCardPreset function first checks if pageType is equal to 1 (presentation mode). If not, it returns directly. Step 2: Select the corresponding size preset according to the value of cardType. If cardType is equal to 2, read the traditional ratio (width=75rem, height=42.1875rem) from the preset and call CardSizeManager.setDimensions to set the size. If cardType is equal to 1, call CardSizeManager.applyPreset('default') to apply the default ratio. Step 3: Call the editor.view.state.doc.descendants method to traverse the document tree. The method receives a callback function with node (node object) and pos (node position) as parameters. Step 4: In the callback function, judge if node.type.name is equal to 'card'. If so, perform node update operation. Step 5: Create a new attribute object newAttrs containing the original attributes (...node.attrs), the new cardType, and a new forceUpdate timestamp (Date.now()); Step 6: If isMobile is true, calculate the mobile font size: screenWidth = window.innerWidth - 20, ratio = screenWidth / 1200, newAttrs.fontSize = baseFontSize × ratio + 'px'; Step 7: Call node.type.validContent to verify the legality of the node content, and skip the node if the verification fails; Step 8: Call editor.view.dispatch to dispatch a transaction created by editor.view.state.tr.setNodeMarkup(pos, undefined, newAttrs), which updates the attributes of the specified node without changing the node type (undefined).

[0039] Verify the page type identifier. If it is a presentation mode, match the corresponding size preset rules according to the card type identifier, load the traditional scale parameters or default scale, and configure the card basic size through the size management unit; Iterate through the document tree to filter card type nodes, and construct a new attribute object including the original node attributes, updated card type identifier, and forced update identifier; If the running environment is detected as a mobile terminal, calculate the adaptive font size according to the ratio of the screen visual width to the reference width and assign it to the new attribute object; Verify the legality of the card node content, update only the size-related attributes of the specified node, and keep the node type unchanged to complete the dynamic adjustment of the size.

[0040] The free canvas generation method based on artificial intelligence further includes: Listen for theme change events. When a theme change is detected, refresh the visual style of the visual node based on the changed theme.

[0041] The theme configuration is abstracted into a JSON object (theme_canvas) through the theme data abstraction layer, which contains 29 theme configuration parameters, covering card background color (cardBgcolor), page background color (pageBgColor), title font object (titleFontObj), text font object (textFontObj), main color (mainColor), border radius (thirdborderRadius), shadow type (thirdboxShadow), block fill mode (blockValue), block fill color array (blockFillColors), etc. Through the CSS variable injection mechanism, the theme JSON is converted into CSS custom properties (--theme-*) by the setThemeStyle function and injected into the:root pseudo class. The conversion process includes dynamic injection of font files, calculation of color transparency, processing of gradient colors, conversion of pixel values to em units, calculation of shadow parameters, and cyclic allocation of block element fill colors. Through the hot update trigger, the theme change event is listened to, the forceApplyCardPreset function is triggered to forcibly refresh the visual styles of all card nodes, and the Vue responsive system is triggered to re-render by updating the forceUpdate timestamp attribute of the node, without the need to reload the page. Step 1: The setThemeStyle function receives the theme detail object tempThemeDetail and the configuration object config as parameters. Step 2: Call the injectFontFace function to inject the title font and text font. The injectFontFace function first checks if the font has been loaded (by document.getElementById to find the font ID). If not loaded, create a style tag, set id to "font-PostScript name", set innerHTML to @font-face rule, which contains font-family, src, font-display attributes, and add the style tag to document.head. Step 3: Process card background color. Determine if cardBgcolor starts with "linear-gradient(" and use it directly if it does. If it contains a comma, call the setGridentBgColor function to convert the comma-separated colors to linear-gradient format. If it is a single color, use the Color library to parse the color and apply transparency, call the alpha method to set transparency, and call the toString method to convert to rgba format. Step 4: Calculate link color. If isLinkColorCustomized is true, use linkColor, otherwise use mainColor. Step 5: Calculate border radius. Divide thirdborderRadius (pixel value) by 16 to convert to em units. Step 6: Calculate card shadow. Generate the corresponding box-shadow CSS value based on the value of thirdboxShadow ('1'= no shadow, '2'= spread shadow, '3'= offset shadow). Step 7: Process block element style. Set block color based on the value of blockValue (1= subtle mode, 2= follow main color mode, 3= custom mode). The subtle mode uses the fixed color #e5e7eb, the follow main color mode uses mainColor, and the custom mode cycles through the blockFillColors array and applies the blockFill transparency. Step 8: Call the document.documentElement.style.setProperty method to set all calculated values as CSS custom properties with property names starting with "--theme-" or "--plist-". Step 9: Trigger the CustomEvent('theme-changed') custom event, passing the calculated theme state object as event detail.

[0042] Provide preset theme templates through the theme template library unit, each containing a complete theme_canvas configuration. Users can browse the theme library and apply them with one click. Provide a visual theme editor interface through the custom theme editor unit, including color selectors, font selectors, spacing sliders, shadow configurators, etc. Users can adjust parameters in real-time preview, and save to generate new theme_canvas JSON objects. The AI color matching assistant unit extracts the main color tone and color matching scheme from the reference picture uploaded by the user using a color extraction algorithm such as the quantize algorithm, automatically generates a theme_canvas configuration, and the color matching scheme includes the harmonious combination of main colors, auxiliary colors, background colors, and text colors.

[0043] After receiving the theme configuration related data, load the title font and body font; Process the card background color according to the parameter format; Select custom link color or theme main tone based on custom identifier; Convert the border radius pixel value to a relative length unit; Match the card shadow effect according to the card shadow type parameter; Set the block element color according to the block element style mode parameter; Configure all style parameters as Cascading Style Sheet custom properties, and set them through the document root element style attribute; Trigger the theme change custom event and carry the theme state object to complete the global refresh of the visual node visual style.

[0044] The free canvas generation method based on artificial intelligence further includes: Use the Pinia library to manage global states through the Pinia state container, including document editor states (useDocEditorStore), user states (useUserStore), and media library states (useMediaDrawerStore). The state container supports state persistence configuration and synchronizes specified state fields to localStorage; Implement the SaveQueueManager class by configuring the debounced save queue, provide two save modes: debouncedSave (debounced save) and immediateSave (immediate save). The debounced save combines multiple save requests within a preset delay time (default 2000ms) into one, and the immediate save clears the debounce timer and immediately executes the save operation. SaveQueueManager maintains the isProcessing flag and queuedSaveFunction queue to ensure that only one save operation is executed at the same time, and the unexecuted save operation is stored in the queue for processing; The debounced save queue avoids redundant save requests through the following mechanisms: Step 1: The SaveQueueManager class maintains four state variables: debounceDelay (default 2000ms), isProcessing (whether a save is currently being processed), queuedSaveFunction (the save function in the queue), debounceTimer (the debounce timer handle); Step 2: The debouncedSave method receives a save function as an argument, first checks if debounceTimer exists, and if so, calls clearTimeout to clear the timer. Then it calls setTimeout to set a new timer with a delay of debounceDelay, and in the timer callback, it calls _executeSave to execute the save function. Step 3: The immediateSave method receives a save function as an argument, first clears the debounceTimer, and then immediately calls _executeSave to execute the save function. Step 4: The _executeSave method first checks the isProcessing flag. If it is true, it means a save is being processed, so it assigns the new save function to queuedSaveFunction and returns. If it is false, it sets isProcessing to true. Step 5: The save function is executed using a try-catch-finally structure. In the finally block, it sets isProcessing to false, then checks if queuedSaveFunction exists. If it does, it takes out the function (saving it to a temporary variable nextSaveFunction), sets queuedSaveFunction to null, and recursively calls _executeSave to execute the next save function. Step 6: The destroy method clears the debounceTimer, sets debounceTimer and queuedSaveFunction to null to prevent memory leaks.

[0045] The firstCardContentCache cache is maintained by an incremental screenshot mechanism. By comparing the current first card content with the cached content, a cover screenshot is only generated when the content changes. The cover screenshot is generated using the modern-screenshot library on the first card DOM element with the following parameters: width 1200 pixels, height 675 pixels, quality 0.9. After the screenshot is generated, it is uploaded to the server and the cache is updated.

[0046] The incremental screenshot mechanism reduces unnecessary screenshot operations by: Step 1: Define the firstCardContentCache reactive variable to cache the JSON content string of the first card; Step 2: The getFirstCardContent function obtains the node object of the first card by accessing docsData.value.content[0].content[0], and calls JSON.stringify to serialize the node object into a string and return it; Step 3: The isFirstCardChanged function calls getFirstCardContent to obtain the current first card content, and compares it with firstCardContentCache. If they are not equal, return true, indicating that the first card has changed; Step 4: The docSaveDesign function receives two parameters, immediate and forceScreenshot. In the save logic, first judge the shouldScreenshot flag. If forceScreenshot is true, force screenshot, otherwise call isFirstCardChanged to determine whether a screenshot is needed; Step 5: If a screenshot is needed, call document.querySelector('.card-node') to obtain the DOM element of the first card, and call the domToBlob function to take a screenshot. The domToBlob function comes from the @isheji / modern-screenshot library, and the configuration parameters include width (1200 pixels), height (675 pixels), and quality (0.9); Step 6: Encapsulate the screenshot Blob object into FormData and call the uploadFile interface to upload it, and get the returned picture URL; Step 7: Update firstCardContentCache to the current first card content to avoid repeated screenshots next time; Step 8: Only include the cover_image field in the save interface parameters when coverImageUrl exists, otherwise omit the field, and the server will not update the cover image.

[0047] The version history unit records the document version at each save, and the version record includes a version number, a save time, a document content snapshot, a change description, and the user can view the version history list and restore to any historical version. The collaborative editing unit uses WebSocket to establish a real-time connection, listens to the editing operations of other users, solves editing conflicts through Operational Transformation (OT) or CRDT algorithm, and realizes multi-user simultaneous editing of the same document. The offline caching unit uses IndexedDB to store a local copy of the document data, allowing the user to continue editing when the network is disconnected, automatically synchronizing local modifications to the server when the network is restored, and updating the local cache after resolving conflicts.

[0048] When the editor content changes, the theme is switched, or the card type is switched, the client caches the save request through the debounce save queue, and combines multiple save requests generated in a short period of time in the debounce save queue; Trigger the debounce save mode when the editor content changes; Trigger the immediate save mode when the theme is switched or the card type is switched.

[0049] The artificial intelligence-based free canvas generation method further includes: Obtain the content of the first card and convert the content of the first card into a string content; Compare the string content with the historical content string, and trigger the screenshot operation when there is a string content change or a screenshot trigger flag; Get the picture uniform resource locator corresponding to the screenshot and update the cache to avoid repeated screenshots; Only when there is a picture uniform resource locator, regenerate the cover screenshot.

[0050] Figure 2 The first schematic diagram of the main components of the artificial intelligence-based free canvas generation system in the embodiment of the application. As shown in Figure 2 The artificial intelligence-based free canvas generation system 1 provided by the embodiment of the application includes an outline generation module 10, a streaming module 20, a buffering module 30, a node rendering module 40, and an adaptive layout module 50.

[0051] The outline generation module 10 is arranged on the server and is used to receive a theme keyword input by a user and call an artificial intelligence model to generate a document outline for the theme keyword; The streaming module 20 is arranged on the server and is used to establish a streaming channel between the server and the client and push chapter data of the document outline to the client in real time based on the streaming channel; The buffer module 30 is arranged on the client and is configured to cache the chapter data in a chapter data buffer queue and extract chapter data from the chapter data buffer queue at a preset time interval and insert the chapter data into the document data; The node rendering module 40 is arranged on the server and is configured to render the document data into visual nodes. The node rendering module 40 is arranged on the server and is configured to render the document data into visual nodes. Figure 3 FIG. 2 is a second schematic diagram of main components of the free canvas generation system based on artificial intelligence according to an embodiment of the present application. Figure 3 As shown in FIG. 2, the free canvas generation system based on artificial intelligence further includes: The theme configuration module 60 is configured to listen to a theme change event and, when detecting a theme change, refresh the visual style of the visual nodes based on the changed theme.

[0052] Figure 4 FIG. 3 is a schematic diagram of an electronic device according to an embodiment of the present application. Figure 4 As shown in FIG. 3, the electronic device 70 includes a processor 701, a memory 702 and a bus 703. The processor 701 and the memory 702 communicate with each other through the bus 703. The processor 701 is configured to call program instructions in the memory 702 to execute the method provided in each method embodiment and execute the method provided in the embodiment of the present application.

[0053] The embodiment provides a non-transitory computer readable storage medium storing computer instructions, and the computer instructions cause a computer to execute the method provided in the embodiment of the present application.

[0054] Those skilled in the art can understand that all or part of the steps of the above method embodiments can be completed by program instruction related hardware, and the foregoing program can be stored in a computer readable storage medium, and the program is executed to perform the steps of the above method embodiments; and the foregoing storage medium includes ROM, RAM, magnetic disc or optical disc and various storage media that can store program codes.

[0055] The above detailed description does not constitute a limitation on the protection scope of the present application. Those skilled in the art should understand that various modifications, combinations, sub-combinations and replacements can occur depending on design requirements and other factors. Any modification, equivalent replacement and improvement within the spirit and principles of the present application should be included in the protection scope of the present application.

Claims

1. A method for generating free canvases based on artificial intelligence, characterized in that, include: The server receives the topic keywords input by the user and calls the artificial intelligence model to generate a document outline for the current document based on the topic keywords; The server establishes a streaming transmission channel with the client and pushes the chapter data of the document outline to the client in real time based on the streaming transmission channel; The client caches the chapter data through a chapter data buffer queue and extracts the chapter data from the chapter data buffer queue at preset time intervals to insert it into the document data; The server renders the document data into visual nodes; The server adjusts the visualization nodes based on the device type and preset ratio.

2. The free canvas generation method based on artificial intelligence according to claim 1, characterized in that, The method further includes: When the client detects a theme change event, it refreshes the visual style of the visualization node based on the changed theme.

3. The free canvas generation method based on artificial intelligence according to claim 1, characterized in that, The method further includes: When the content of the free canvas editor changes, the theme of the current document is switched, or the type of the visual node card is switched, the client caches save requests through a debouncing save queue and merges multiple save requests generated in a short period of time in the debouncing save queue. Trigger debounce save mode when editor content changes; The instant save mode is triggered when switching themes or card types.

4. The free canvas generation method based on artificial intelligence according to any one of claims 1 or 2, characterized in that, The method further includes: Retrieve the content of the first card containing the first-level chapter of the document outline in the free canvas editor and convert the content of the first card into string content; The string content is compared with the historical content string. When there is a change in the string content or a screenshot trigger flag, a screenshot operation is triggered. Obtain the Uniform Resource Locator (URL) for the image corresponding to the screenshot and update the cache to avoid duplicate screenshots; Regenerate cover screenshot only if an image Uniform Resource Locator is available.

5. The free canvas generation method based on artificial intelligence according to claim 3, characterized in that, After the step of caching the chapter data for the client through the chapter data buffer queue, the following steps are included: If the queue processing status flag of the chapter data buffer queue is in an unprocessed state, then the loop of extracting chapter data from the chapter data buffer queue and inserting it into the document data is started. The chapter data buffer queue processing function extracts a chapter data from the head of the chapter data buffer queue, and the data insertion function is called to insert the chapter data into the document data. The editor content update interface is called to update the content displayed in the editor, and the style application function is called to apply the preset card style to the visual nodes; Set a scheduled task to recursively call the chapter data buffer queue processing function after the specified duration of the chapter display interval parameter, until the chapter data buffer queue is empty.

6. The free canvas generation method based on artificial intelligence according to claim 3, characterized in that, The step of rendering the document data into visual nodes includes: The card nodes corresponding to the document data are mapped to view components, and the view components include drag handles, style configuration handles, card bodies, and style menu overlays. The view component is used to visualize and interact with the card nodes. Establish a two-way mapping relationship between the attributes of card nodes and the data attributes of document object model elements; The deserialization of document object model element data attributes to card node attributes and the serialization of card node attributes to document object model element data attributes are achieved through Hypertext Markup Language parsing and rendering functions, ensuring consistency between the data layer and the view layer.

7. The free canvas generation method based on artificial intelligence according to claim 3, characterized in that, The method of dynamically adjusting the size parameters of the visualization node based on device type and preset ratio includes: Verify the page type identifier. If it is a presentation mode, match the corresponding size preset rules according to the card type identifier, load the traditional ratio parameters or the default ratio, and configure the basic card size through the size management unit. Traverse the document tree to filter card type nodes and construct a new attribute object. The new attribute object includes the original attributes of the node, the updated card type identifier, and the forced update identifier. If the operating environment is detected to be a mobile terminal, calculate the adapted font size according to the ratio of the screen's visible width to the baseline width, and assign it to the new attribute object; Verify the validity of the card node content, update only the size-related attributes of the specified node, keep the node type unchanged, and complete the dynamic size adjustment.

8. The free canvas generation method based on artificial intelligence according to claim 2, characterized in that, The step of refreshing the visual style of the visualization node based on the theme change includes: After receiving the theme configuration data, load the title font and body font; Process card background color according to parameter format; Choose a custom link color or theme color based on the custom identifier; Convert the pixel values ​​of the rounded corners of the border to relative length units; Match card shadow effects according to card shadow type parameters; Set the color of the block element according to the block element style mode parameters; Configure all style parameters as custom properties of Cascading Style Sheets, and apply them through the style properties of the document root element; Trigger a custom theme change event and carry the theme state object to complete a global refresh of the visual style of the visualization nodes.

9. A system for generating free canvases based on artificial intelligence, characterized in that, include: The outline generation module, located on the server, is used to receive user-inputted topic keywords and call an artificial intelligence model to generate a document outline for the topic keywords. A streaming module, located on the server, is used to establish a streaming channel between the server and the client, and to push the chapter data of the document outline to the client in real time based on the streaming channel. A buffer module, located on the client side, is used to cache the chapter data through a chapter data buffer queue and extract chapter data from the chapter data buffer queue at preset time intervals and insert it into the document data. The node rendering module, located on the server side, is used to render the document data into visual nodes; An adaptive layout module, located on the server side, is used to dynamically adjust the visualization nodes based on device type and preset ratio.

10. An electronic device comprising a memory, a processor, and a computer program stored in the memory and running on the processor, characterized in that, When the processor executes the computer program, it implements the steps of the method as described in any one of claims 1 to 8.

Images